调用 clearTimeout 后 setInterval 继续运行答案

【问题标题】：setInterval keeps running after clearTimeout has been called调用 clearTimeout 后 setInterval 继续运行
【发布时间】：2017-07-29 06:00:40
【问题描述】：

我声明了一个全局变量 sim，我在其中初始化了 setInterval。在 progressSim 函数中，我使用了 clearTimeout()，但它不会停止 setInterval。

var sim;
function loop(){
    var ctx1 = document.getElementById($(allChild[i]).attr('id')).getContext('2d');
    dataPercent = $(allChild[i]).attr('data-percent');
    cw = ctx1.canvas.width;
    ch = ctx1.canvas.height;
    sim = setInterval( function() { 
         progressSim(ctx1); 
    }, 50 );

    setTimeout(function () {
        i++;                     
        if (i < allChild.length) {            
            loop();             
        }                        
    }, 20)
}

loop();

function progressSim(ctx){
    diff = ((al / 100) * Math.PI*2*10).toFixed(2);
    ctx.clearRect(0, 0, cw, ch);
    ctx.lineWidth = 15;
    ctx.fillStyle = '#09F';
    ctx.strokeStyle = "#09F";
    ctx.textAlign = 'center';
    ctx.fillText(al+'%', cw*.5, ch*.5+2, cw);
    ctx.beginPath();
    ctx.arc(100, 85, 75, start, diff/10+start, false);
    ctx.stroke();

    if(al >= 30){
        clearTimeout(sim);
    }
    al++;
}

如果有任何问题，请告诉我。提前谢谢你。

【问题讨论】：

我认为 clearTimeout 和 clearInterval 是可以互换的，但至少为了保持一致性，你应该使用正确的“对应物”。到目前为止，你做了什么来调试这个？你有没有检查它是否真的进入那个 if？
好吧，您通过多次调用loop 来启动多个setIntervals，但只有最近的一个（sim 引用）会被清除。

标签： javascript setinterval cleartimeout

【解决方案1】：

好吧，al 在progressSim 中是未定义的。你怎么期望它变成>= 30？

在脚本开头添加类似于 var al 的内容应该会有所帮助。

【讨论】：

我在全球范围内声明了它。 al 不是未定义的。

【解决方案2】：

试过clearInterval(sim)？您正在尝试清除不存在的超时 sim

您还通过在超时中再次调用循环函数来创建多个sim 间隔

【讨论】：