javascript - 调用 clearTimeout 后 setInterval 继续运行

Question

我声明了一个全局变量 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++;
}

让我知道是否有任何疑虑。先感谢您。

Answer 1

嗯，al在progressSim. 你怎么期望它永远成为>= 30？

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

Answer 2

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

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