Comment arrêter une boucle `setTimeout` en JavaScript ?

Comment contrôler l'exécution d'une boucle setTimeout

Vous essayez de créer un indicateur de chargement à l'aide d'une image de sprite et vous avez rencontré un problème arrêtant la boucle une fois le chargement terminé. La fonction que vous avez fournie lance une boucle setTimeout qui parcourt un tableau de valeurs à des intervalles spécifiés. Le défi réside dans l'arrêt de cette boucle par programme.

Pour résoudre ce problème, vous pouvez utiliser le handle de minuterie renvoyé par setTimeout. Vous pouvez ensuite utiliser clearTimeout pour arrêter l'opération de timeout.

Voici une version modifiée de votre code qui intègre cette technique :

function setBgPosition() {
    var c = 0,
        timer = 0;
    var numbers = [0, -120, -240, -360, -480, -600, -720];
    function run() {
        Ext.get('common-spinner').setStyle('background-position', numbers[c++] + 'px 0px');
        if (c >= numbers.length) {
            c = 0;
        }
        timer = setTimeout(run, 200);
    }
    timer = setTimeout(run, 200);

    return stop;

    function stop() {
        if (timer) {
            clearTimeout(timer);
            timer = 0;
        }
    }
}

var stop = setBgPosition();
// ...later, when you're ready to stop...
stop();

En attribuant le handle du timer à la variable timer, vous pouvez référence et effacez-le en utilisant clearTimeout lorsque le chargement est terminé.

De plus, il vaut la peine d'envisager d'utiliser setInterval au lieu de setTimeout dans scénarios où une exécution répétitive est souhaitée. Cela peut simplifier le code et fournir une solution plus robuste.

N'oubliez pas d'implémenter les mécanismes appropriés dans setBgPosition lui-même pour détecter le moment où la boucle doit se terminer afin de garantir une fonction autonome et autonome.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!