Comment dois-je effectuer une simple bascule opération en JavaScript à l'aide de la fonction setInterval()?

Déplacez le drapeau de la variable de la fonction:

let b = true;

const fnInterval = setInterval(function() {
    if (b) {
        console.log("hi");
    } else {
        console.log("bye");
    }
    b = !b
}, 1000);

Pour arrêter le retardateur après 10 000 millisecondes, encapsuler l'appel à clearInterval dans un setTimeout:

setTimeout(() => clearInterval(fnInterval), 10000);

En attendant, notez que la valeur de retour de setInterval n'est pas une fonction mais un certain nombre, de sorte qu'il peut être trompeur de l'appeler fnInterval.

Tout d'abord, déclarer let b = true en dehors de la fonction de rappel. C'est réinitialisée à chaque appel autrement.

Deuxièmement, les 10000 clearTimeout(fnInterval, 10000) n'est pas un paramètre valide. clearTimeout(timeoutId) accepte seulement le premier paramètre et efface le délai d'expiration immédiatement. Vous auriez besoin d'un setTimeout pour déclencher ce bout de 10 secondes, si c'est votre but. Mais qui provoque une condition de concurrence entre les deux délais d'attente -- imprécision peut signifier que vous allez manquer certains de journaux ou de vent avec d'autres journaux.

À l'aide d'un compteur est une solution, comme d'autres réponses montrer, mais en général, quand je suis en utilisant le complexe de la synchronisation avec des setInterval qui nécessite de l'effacer après un certain nombre d'itérations, je refactoriser un générique promisified sleep fonction sur la base d' setTimeout. Cela permet de maintenir l'appel de code beaucoup plus propre (pas de rappels) et évite de jouer avec clearTimeout.

Au lieu d'un booléen pour retourner un drapeau en arrière-et-vient entre les deux messages, une meilleure solution est d'utiliser un tableau et le module de l'index actuel par les messages longueur du tableau. Cela le rend beaucoup plus facile d'ajouter plus d'éléments à parcourir et le code est plus facile à comprendre, puisque l'état est implicite dans le compteur.

const sleep = ms => new Promise(res => setInterval(res, ms));

(async () => {
  const messages = ["hi", "bye"];
  
  for (let i = 0; i < 10; i++) {
    console.log(messages[i%messages.length]);
    await sleep(1000);
  }
})();

setInterval() est arrêté par clearInterval() pas clearTimeout(). Les détails font l'objet de commentaires dans le code ci-dessous.

// Define a counter
let i = 0;
// Define interval function
const fnCount = setInterval(fnSwitch, 1000);

function fnSwitch() {
  // Increment counter
  i++;
  // if counter / 2 is 0 log 'HI'
  if (i % 2 === 0) {
    console.log(i + ' HI');
    // Otherwise log 'BYE'
  } else {
    console.log(i + ' BYE');
  }
  // If counter is 10 or greater run fnStop()
  if (i >= 10) {
    fnStop();
  }
};

function fnStop() {
  // Stop the interval function fnCount()
  clearInterval(fnCount);
};