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间隔

setInterval在调用clearTimeout后继续运行

2 个答案: