clearInterval 不会清除间隔

Question

这很简单，您单击一个按钮启动 "setInterval"，然后单击另一个按钮停止它。停止按钮不起作用。

我知道有很多类似的问题，但我认为我已经按照所陈述的答案进行了设置。此处如何正确清除间隔？

代码：

// declare globally
var runslides;

// set up play function
function startPlaying(){
 // set interval
 var runslides = setInterval(slides, 1000);
}

// function for set interval to use
function slides(){
 $('body').append('<div>Function Ran</div>');
}

// start the interval
$(document.body).on('click', '#start' ,function(event){
 startPlaying();
});

// stop the interval
$(document.body).on('click', '#stop' ,function(event){
 clearInterval(runslides);
});

html, body {
  font-family:sans-serif;
  font-size:12px;
  background:#222;
}

a:link, a:visited {
  background:#fff;
  text-decoration:none;
  padding:5px;
  display:inline-block;
}

div {
  display:inline-block;
  background:#ccc;
  padding:5px;
  margin:5px 5px 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <a href="#" id="start">Click To Start</a>
  <a href="#" id="stop">Click To Stop</a>
  <br>

Answer 1

问题在于您在 startPlaying() 函数中使用了 var - 它重新定义了 runslides 变量的范围。你只需要删除它。

function startPlaying() {
  runslides = setInterval(slides, 1000); // remove 'var' here
}

更好的是，不要在你的 JS 代码中使用全局变量。您可以将计时器的引用放在 body 上的 data 属性中：

function startPlaying() {
  $('body').data('slides-interval', setInterval(slides, 1000));
}

function slides() {
  $('body').append('<div>Function Ran</div>');
}

$('body')
  .on('click', '#start', startPlaying)
  .on('click', '#stop', function(event) {
    clearInterval($('body').data('slides-interval'));
  });

html,
body {
  font-family: sans-serif;
  font-size: 12px;
  background: #222;
}
a:link,
a:visited {
  background: #fff;
  text-decoration: none;
  padding: 5px;
  display: inline-block;
}
div {
  display: inline-block;
  background: #ccc;
  padding: 5px;
  margin: 5px 5px 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" id="start">Click To Start</a>
<a href="#" id="stop">Click To Stop</a>
<br>

Answer 2

您要在本地重新声明 var runslides = setInterval(slides, 1000); 只需执行以下操作：

runslides = setInterval(slides, 1000);

Answer 3

在函数范围内重新定义 runslides 的问题已在之前的回答中得到解决。还需要防止多次启动幻灯片，以使停止幻灯片最终起作用。

为可读性初始化 runslides：

var runslides = 0;  // in global or outer function scope

如果幻灯片是运行:

，请将 startPlaying 更改为忽略点击开始

function startPlaying() {
    if(!runslides){
        runslides = setInterval(slides, 1000);
    }
}

并获取停止播放处理程序以清除间隔计时器 ID：

// stop the interval
$(document.body).on('click', '#stop' ,function(event){
    if( runslides) {
        clearInterval(runslides);
        runslides = 0;
    }
});

（注意 runslides 的真实性测试主要是记录性的：clearInterval 只是忽略无效参数）。

clearInterval 不会清除间隔

clearInterval won't clear the interval

javascript

jquery

setinterval