javascript - clearInterval() 是如何工作的？

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 :Fiddle

Answer 1

正如其他答案，第一个计时器 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 变量可能会受到相同的影响，具体取决于您的尝试；我还没有在这里讨论这个问题。

希望这有帮助。