在调用clearTimeout之后，setInterval继续运行

Question

I declared a global variable sim in which I initialized setInterval. In progressSim function I used clearTimeout() but it does not stop the 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++;
}

Let me know if any concerns. Thank you in advance.

Answer 1

Well, al is undefined in progressSim . How do you ever expect it to ever become >= 30 ?

Adding something similar to var al at the beginning of your script should help.

Answer 2

Tried clearInterval(sim) ? You are trying to clear a timeout sim that doesn't exist

Also you are creating multiple sim intervals by calling the loop function in the timeout again