多次点击播放后jQuery轮播clearInterval失效无法暂停问题

• 核心问题是多次点击Play按钮会创建多个并行的定时器：你没有在创建新定时器前清除已存在的定时器，每次点击Play都会生成一个新的定时器ID覆盖interval变量，之前的定时器ID会丢失，无法再被清除。
• 多个定时器同时执行updateDiv方法，就会导致轮播切换速度变快、动画混乱；点击Pause时clearInterval只能清除最后生成的那个定时器，其余还在运行的定时器无法被停止，所以暂停功能失效。

只要在每次创建新定时器前，先清除已存在的定时器即可，避免同时存在多个轮播定时器。修正后的JS代码如下：

var interval = false;
$("#slideshow > div:gt(0)").hide();

function updateDiv() {
  $('#slideshow > div:first')
    .fadeOut(600)
    .next()
    .fadeIn(400)
    .end()
    .appendTo('#slideshow');
}
$(".play").click(function() {
  // 新增：创建新定时器前先清除旧的
  if(interval) clearInterval(interval);
  interval = setInterval(updateDiv, 1000);
});
$(".pause").click(function() {
  clearInterval(interval);
  // 可选：清除后把interval重置为false，避免后续判断出错
  interval = false;
});

如果需要更严谨的交互，还可以加上播放状态锁：点击Play后禁用Play按钮，点击Pause后再恢复启用，从交互层面避免用户重复点击Play。

// 状态锁优化版本逻辑
$(".play").click(function() {
  if(interval) return; // 已经在播放就直接返回，不重复创建定时器
  interval = setInterval(updateDiv, 1000);
  $(this).prop('disabled', true);
});
$(".pause").click(function() {
  clearInterval(interval);
  interval = false;
  $(".play").prop('disabled', false);
});

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