基于jQuery的Slideshow程序运行时最后一张幻灯片重复显示两次，如何解决？

问题根因 #

• 核心逻辑顺序错误：现有代码先判断当前选中图片是否为空，再执行next()切换到下一张。当当前选中的是最后一张图片时，执行next()会得到空jQuery对象，此时直接取src属性会得到undefined，给img的src赋值为undefined不会触发图片替换，页面会继续展示最后一张图片，直到下一次轮播触发才会检测到imgArray为空切回第一张，最终表现就是最后一张重复出现两次。
• 辅助逻辑错误：点击图片停止轮播的逻辑写法错误，调用空参数的setInterval()无法停止正在运行的定时器，正确写法是使用clearInterval()传入定时器ID。

修复后代码 #

$(document).ready(function() {
  // 初始获取第一张图片
  var currentImg = $("#slides img:first-child");
  var newCaption;
  var nextImg;
  var SlideShow = function() {
    $("#slide").fadeOut(1000, function() {
      // 先切换到下一张，再判断是否为空
      currentImg = currentImg.next();
      if (currentImg.length === 0) {
        // 已经到末尾，切回第一张
        currentImg = $("#slides img:first-child");
      }
      
      nextImg = currentImg.attr("src");
      newCaption = currentImg.attr("alt");
      $("#slide").attr("src", nextImg).fadeIn(1000);
      $("#caption").text(newCaption).show(1000);
    });
  };
  // 启动定时器，保存ID
  var slideTimer = setInterval(SlideShow, 2000);
  
  $("#slide").click(function() {
    // 正确停止定时器
    clearInterval(slideTimer);
  });
});

内容的提问来源于stack exchange，提问作者Mario Pelletier