Question

我是给定的代码，我使用setInterval()和clearInterval()方法。以下是setInterval()的两个按钮和clearInterval()的两个按钮，如果我单击两个setInterval()按钮，则clearInterval()按钮不起作用。

HTML：

<div id="a"></div>

<button id='bt1'>start</button>
<button id='bt2'>Stop</button>
<button id='bt3'>Start</button>
<button id='bt4'>Stop</button>

使用Javascript：

var Graph = {
graph: null,
start: function (i) {
    this.graph = setInterval(function () {
        $('#a').html(i++);
    }, 1000);
},
stop: function () {
    window.clearInterval(this.graph);
}
};
$('#bt1').click(function(){
   Graph.start(1);
});
$('#bt2').click(function(){
   Graph.stop();
});
$('#bt3').click(function(){
   Graph.start(1);
});
$('#bt4').click(function(){
   Graph.stop();
});

小提琴：Fiddle

Answer 1

您只有一个变量来存储两次调用setInterval的结果，即您在第二次调用时覆盖它，因此无法清除第一个定时器。

Answer 2

正如其他人的回答，第一个计时器ID被覆盖。尝试将ID分别存储在数组中，或至少作为单独的变量名存储。这是使用数组的一个调整：

var Graph = {
graph: [0, 0],                               /// turn this into an array
start: function(id, i) {                     /// add a new parameter here
    this.graph[id] = setInterval(function () {
        $('#a').html(i++);
    }, 1000);
},
stop: function (id) {                        /// add parameter here as well
    window.clearInterval(this.graph[id]);
}
};
$('#bt1').click(function(){
   Graph.start(0, 1);                        /// set index 0 with this timer id
});
$('#bt2').click(function(){
   Graph.stop(0);                            /// stop using id at index 0
});
$('#bt3').click(function(){
   Graph.start(1, 1);                        /// etc.
});
$('#bt4').click(function(){
   Graph.stop(1);
});

根据您的尝试，您的i变量可能会受到同样的影响;我没有在这里解决这个问题。

希望这有帮助。

Answer 3

clearInterval()方法清除使用setInterval()方法设置的计时器。

setInterval()返回的ID值用作clearInterval()方法的参数。

注意：为了能够使用clearInterval()方法，您必须在创建区间方法时使用全局变量：

myVar = setInterval("javascript function",milliseconds);

然后，您将能够通过调用clearInterval（）方法来停止执行。

您也可以参考此answer

Answer 4

如果单击＃bt1按钮然后单击＃bt3按钮，则第二个start()函数调用将覆盖graph对象中的Graph变量。因此，第一个setInterval()调用返回的ID值将丢失，您无法清除第一个计时器。

只需在setInterval()方法的start()调用之前添加以下代码行。这将停止先前运行的计时器：

if (this.graph) { this.stop(); }

像这样：

var Graph = {
graph: null,
start: function (i) {
    if (this.graph) { this.stop(); }
    this.graph = setInterval(function () {
        $('#a').html(i++);
    }, 1000);
},
stop: function () {
    window.clearInterval(this.graph);
}
};
$('#bt1').click(function(){
   Graph.start(1);
});
$('#bt2').click(function(){
   Graph.stop();
});
$('#bt3').click(function(){
   Graph.start(1);
});
$('#bt4').click(function(){
   Graph.stop();
});

clearInterval（）如何工作？

4 个答案: