Exécution du code après clearInterval

Question

J'ai un setInterval appelant une boucle qui affiche une animation.

Lorsque I clearInterval en réponse à une entrée utilisateur, il y a éventuellement un ou plusieurs rappels de boucle dans la file d'attente. Si je mets un appel de fonction directement après l'instruction clearInterval, l'appel de fonction se termine d'abord (en imprimant quelque chose à l'écran), puis un rappel de boucle en file d'attente s'exécute, effaçant ce que je voulais imprimer.

Voir le code ci-dessous.

function loop() { 
    // print something to screen 
} 

var timer = setInterval(loop(), 30); 

canvas.onkeypress = function (event) { 
    clearInterval(timer); 
    // print something else to screen 
} 

Quelle est la meilleure façon de gérer cela? Mettre un retard sur le // print something else to screen? Faire la nouvelle impression dans la boucle?

Modifier: Merci pour les réponses. Pour référence future, mon problème était que l'événement qui déclenchait l'impression supplémentaire était enfoui dans la boucle, donc une fois cette opération exécutée, le contrôle était retourné à la boucle inachevée, qui l'écrasait ensuite. À votre santé.

Answer 1

Vous pouvez également utiliser un drapeau afin d'ignorer toute file d'attente fonctions:

var should; 

function loop() { 
    if(!should) return; // ignore this loop iteration if said so 

    // print something to screen 
} 

should = true; 
var timer = setInterval(loop, 30); // I guess you meant 'loop' without '()' 

canvas.onkeypress = function (event) { 
    should = false; // announce that loop really should stop 
    clearInterval(timer); 
    // print something else to screen 
} 

Answer 2

Tout d'abord, vous avez probablement voulu dire:

var timer = setInterval(loop, 30); 

Deuxièmement, appelez-vous que clearInterval ne pas propre la file d'attente des appels loop() en attente? Si tel est le cas, vous pouvez facilement désactiver ces appels en utilisant une sorte de garde:

var done = false; 

function loop() { 
    if(!done) { 
     // print something to screen 
    } 
} 

var timer = setInterval(loop(), 30); 

canvas.onkeypress = function (event) { 
    clearInterval(timer); 
    done = true; 
    // print something else to screen 
}