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

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

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

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

＆＃13;

body

＆＃13;

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'));
  });

＆＃13;

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;
}

＆＃13;

Answer 2

您在本地重新声明var runslides = setInterval(slides, 1000);：

runslides = setInterval(slides, 1000);

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只是忽略无效的参数。）

clearInterval不会清除间隔

3 个答案: