Question

我正在尝试clearInterval已经设置的间隔。我的第一个setInterval对象有一段代码，它每12秒执行一次，同样在同一个函数中，还有另一个setInterval对象在这12秒的时间范围内每隔1秒执行一次。

所以这里的问题是，我可以为main（外部）setInterval对象做clearInterval，但内部没有任何反应。

请参阅代码段。

start.addEventListener("click", function() {    

    interval = setInterval(function() {

        Object.assign(h1.style, { color: selectedColor, borderbottom: '4px solid ' + selectedColor });

        interval1 = setInterval(startTimer, 1000);

    }, 12000);

});


stop.addEventListener("click", function() {
    clearInterval(interval);
    clearInterval(interval1);
});

所以，我试图首先清除内部setInterval对象的间隔，然后再清除外部，仍然没有运气，没有任何反应。

任何快速的解决方案，建议都非常感谢，因为我在途中无法继续解决这个问题。

提前致谢。

Answer 1

您应该将interval和interval1变量声明移到更高的范围，这样所有函数都可以达到它们的值。

var interval;
var interval1;

start.addEventListener("click", function() {    

    interval = setInterval(function() {

        Object.assign(h1.style, { color: selectedColor, borderbottom: '4px solid ' + selectedColor });

        interval1 = setInterval(startTimer, 1000);

    }, 12000);

});


stop.addEventListener("click", function() {
    clearInterval(interval);
    clearInterval(interval1);
});

Answer 2

interval = setInterval(function() {

    Object.assign(h1.style, { color: selectedColor, borderbottom: '4px solid ' + selectedColor });

    interval1 = setInterval(startTimer, 1000);

}, 12000);

表示您创建一个新间隔，并每12秒将其存储在interval1。所以一分钟之后，你有五个运行的计时器将触发startTimer，interval1只指向最后一个。您可以将interval1移出间隔：

 interval = setInterval(function() {

    Object.assign(h1.style, { color: selectedColor, borderbottom: '4px solid ' + selectedColor });

}, 12000);

interval1 = setInterval(startTimer, 1000);

或者如果你真的想用大量间隔杀死你的浏览器，你可以将interval1存储在一个数组中：

intervals1=[];
 interval = setInterval(function() {

    Object.assign(h1.style, { color: selectedColor, borderbottom: '4px solid ' + selectedColor });

    intervals1.push(setInterval(startTimer, 1000));

}, 12000);

终止所有间隔：

intervals1.forEach(interval=>destroyInterval(interval));

请注意，它的不良风格不是声明变量，所以你可以这样做：

var interval,interval1;

在全球范围内。

嵌套setInterval的Clear Interval问题

2 个答案: