jQuery 单击多个 setInterval 时 ClearInterval 不起作用

Question

这是一个简单的 jQuery 滑块，我将通过单击 Play 按钮启动它并设置 interval = setInterval(updateDiv,1000); 每 1 秒更换一次幻灯片的间隔，以及我正在通过 clearInterval(interval); 通过 Pause 按钮清除间隔（暂停滑块）。

但我面临的问题是，如果用户多次单击播放按钮，则滑块动画会在更改幻灯片时变得疯狂，此后 clearInterval(interval); 功能也无法正常工作。为什么？

我能知道解决方法吗

我的全部代码是：

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

function updateDiv() {
  $('#slideshow > div:first')
    .fadeOut(600)
    .next()
    .fadeIn(400)
    .end()
    .appendTo('#slideshow');
}
$(".play").click(function() {
  interval = setInterval(updateDiv, 1000);
});
$(".pause").click(function() {
  clearInterval(interval);
});

#slideshow {
  margin: 80px auto;
  position: relative;
  width: 240px;
  height: 240px;
  padding: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

#slideshow>div {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
}

#slideshow2 {
  margin: 80px auto;
  position: relative;
  width: 240px;
  height: 240px;
  padding: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  margin-left: 200px;
}

#slideshow2>div {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
}

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
------
<button class="play">play</button>
<button class="pause">pause</button> -------

<div id="slideshow">
  <div>
    <img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
  </div>
  <div>
    <img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
  </div>
  <div>
    Pretty cool eh? This slide is proof the content can be anything.
  </div>
</div>

Answer 1

每次用户点击“.play”时，都会创建另一个 setInterval，interval 变量只包含最后一个。因此，如果已经有一个间隔，您需要清除它或阻止用户重新开始。

这是一个可行的解决方案：

var interval;
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){
    interval = setInterval(updateDiv, 1000);
  }
 
});
$(".pause").click(function() {
  clearInterval(interval);
  interval = false;
});

#slideshow {
  margin: 80px auto;
  position: relative;
  width: 240px;
  height: 240px;
  padding: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

#slideshow>div {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
}

#slideshow2 {
  margin: 80px auto;
  position: relative;
  width: 240px;
  height: 240px;
  padding: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  margin-left: 200px;
}

#slideshow2>div {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
}

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
------
<button class="play">play</button>
<button class="pause">pause</button> -------

<div id="slideshow">
  <div>
    <img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
  </div>
  <div>
    <img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
  </div>
  <div>
    Pretty cool eh? This slide is proof the content can be anything.
  </div>
</div>

jQuery 单击多个 setInterval 时 ClearInterval 不起作用

jQuery ClearInterval not working when multiple setInterval clicked

html

javascript

css

jquery

slider