clearInterval不会清除间隔

Question

这很简单，你点击一个按钮来启动一个“setInterval”，然后点击另一个按钮来停止它。停止按钮不起作用。

我意识到有很多类似的问题，但我认为我已经设置好了答案。我如何正确清除这里的时间间隔？

代码：

// declare globally 
 
var runslides; 
 

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

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

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

 
// stop the interval 
 
$(document.body).on('click', '#stop' ,function(event){ 
 
\t 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

您要重新声明var runslides = setInterval(slides, 1000);本地只是做：

runslides = setInterval(slides, 1000); 

Answer 2

的问题是startPlaying()功能在您使用的var - 它重新定义了runslides变量的作用域。你只需要删除它。

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

更好的是，不要在你的JS代码中使用全局变量。你可以把定时器的参考在data属性上body代替：

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 3

的问题在以前的答案中已经解决了在函数范围内重新定义runslides。多次开始幻灯片播放也需要防止，以使停止幻灯片能够最终奏效。

E.G.为了可读性初始化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根本忽略了inva盖参数）。