Maison >interface Web >tutoriel CSS >Comment arrêter une boucle setTimeout ou setInterval pour le chargement des indicateurs ?

Comment arrêter une boucle setTimeout ou setInterval pour le chargement des indicateurs ?

Linda Hamilton
Linda Hamiltonoriginal
2024-12-03 03:05:11994parcourir

How to Stop a setTimeout or setInterval Loop for Loading Indicators?

Arrêt des boucles setTimeout

Lors de la création d'un indicateur de chargement à l'aide d'un sprite, il est courant de s'appuyer sur une boucle pour parcourir les positions d'arrière-plan. Une approche consiste à utiliser la fonction setTimeout, mais que se passe-t-il si vous devez arrêter la boucle une fois le processus de chargement terminé ?

Implémentation setTimeout

La fonction setTimeout en JavaScript renvoie un poignée de minuterie qui vous permet d'annuler le délai d'attente à l'aide de la fonction clearTimeout. Pour implémenter cela, vous pouvez créer une fonction stop() dans la fonction setBgPosition :

function setBgPosition() {
    var c = 0,
        timer = 0;
    ...
    return stop;

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

Pour l'utiliser, vous pouvez attribuer la fonction setBgPosition à une variable et appeler la fonction stop() plus tard pour arrêter le loop :

var stop = setBgPosition();
// ... later ...
stop();

Approche alternative : setInterval

Une alternative à l'utilisation setTimeout est setInterval, qui exécute à plusieurs reprises une fonction à un intervalle spécifié. Voici comment l'utiliser avec clearInterval :

function setBgPosition() {
    ...
    return setInterval(run, 200);
}

Pour arrêter la boucle :

var timer = setBgPosition();
// ... later ...
clearInterval(timer);

Cependant, il est recommandé d'explorer les options permettant de détecter la condition d'achèvement et d'autoriser setBgPosition à arrêter la boucle. boucle elle-même. Cette approche offre un plus grand contrôle et une plus grande flexibilité dans la gestion des opérations de chargement.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn