javascript - clearInterval()如何工作？

在给定的代码中，我正在使用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

最佳答案

作为其他答案，第一计时器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变量可能会受到相同的影响，具体取决于您尝试执行的操作。我在这里没有解决。

希望这可以帮助。

关于javascript - clearInterval()如何工作？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21108579/