单击多个setInterval时jQuery ClearInterval不起作用[重复]

Posted 2023-05-08

【中文标题】单击多个setInterval时jQuery ClearInterval不起作用[重复]

【英文标题】：jQuery ClearInterval not working when multiple setInterval clicked [duplicate]

【发布时间】：2021-12-20 13:10:09

【问题描述】：

这是一个简单的 jQuery 滑块，我将通过单击 Play 按钮来启动它，通过设置 interval = setInterval(updateDiv,1000); 间隔以每 1 秒更改一次幻灯片，我正在通过 @ 清除间隔（暂停滑块） 987654323@ 到 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>

【问题讨论】：

你试过在setInterval之前简单地调用clearInterval(interval);吗？

【参考方案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>

【讨论】：

@Davide Carlier 先生请检查这个请***.com/questions/70042321/…