Comment puis-je arrêter une boucle « setTimeout » ou « setInterval » en JavaScript ?

Arrêter une boucle setTimeout

Lors de la construction d'un indicateur de chargement à l'aide d'un sprite, une approche courante consiste à utiliser une fonction pour définir la position d'arrière-plan de l’indicateur. Pour créer une boucle continue, le code a recours à l'appel récursif de la fonction dans un rappel setTimeout. Cependant, il peut arriver un moment où vous devrez arrêter cette boucle à la fin d'une certaine action.

Une solution consiste à récupérer le handle de minuterie renvoyé par setTimeout et à l'utiliser avec clearTimeout pour terminer la boucle. Voici une version modifiée du code qui implémente cette approche :

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 to stop the loop

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

Pour utiliser ce code, vous pouvez appeler setBgPosition() et stocker la fonction renvoyée (stop) dans une variable :

var stop = setBgPosition();

Lorsque vous devez arrêter la boucle, appelez simplement la fonction stop :

stop();

Alternativement, vous pouvez utiliser setInterval au lieu de setTimeout. setInterval répète automatiquement la fonction spécifiée à un intervalle donné. Voici un exemple utilisant setInterval :

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

Dans ce scénario, le code ci-dessous arrêtera la boucle :

var timer = setBgPosition();
clearInterval(timer);

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!