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

Arrêter une boucle setTimeout

Dans le code fourni, une boucle setTimeout est utilisée pour définir en continu la position d'arrière-plan d'un sprite d'image, créant une animation de chargement. Cependant, il est nécessaire de contrôler quand la boucle est arrêtée une fois le chargement terminé.

La solution consiste à utiliser le handle de minuterie renvoyé par setTimeout. Cette poignée peut être utilisée conjointement avec clearTimeout pour arrêter le délai d'attente.

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;
        }
    }
}

Ce code révisé définit une fonction d'arrêt dans setBgPosition. La fonction stop vérifie si la poignée de minuterie est présente et, si c'est le cas, l'efface avec clearTimeout. Le code mis à jour peut être utilisé comme suit :

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

Alternativement, setInterval peut être utilisé à la place de setTimeout pour créer une boucle répétitive. Cependant, setInterval nécessite clearInterval pour arrêter la boucle.

function setBgPosition() {
    var c = 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;
        }
    }

    return setInterval(run, 200);
}

Ce code peut être utilisé comme suit :

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

Enfin, il est recommandé d'envisager d'utiliser une condition dans setBgPosition lui-même pour détecter l'achèvement du processus de chargement et arrêter automatiquement la boucle.

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!