Come faccio a eseguire una semplice operazione di commutazione in JavaScript con l'aiuto di setInterval()?

Spostare la bandiera variabile al di fuori della funzione:

let b = true;

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

Per interrompere il timer dopo 10000 millisecondi, avvolgere la chiamata al clearInterval in un setTimeout:

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

Nel frattempo, nota che il valore di ritorno setInterval non è una funzione ma un numero, quindi potrebbe essere fuorviante chiamare fnInterval.

Prima di tutto, dichiarare let b = true al di fuori della funzione di callback. È re-inizializzato a ogni chiamata diversamente.

In secondo luogo, i 10000 in clearTimeout(fnInterval, 10000) non è un parametro valido. clearTimeout(timeoutId) accetta solo il primo parametro e cancella il timeout restituito immediatamente. C'è bisogno di una setTimeout per attivare questo dopo 10 secondi, se questo è il vostro obiettivo. Ma che provoca una condizione di competizione tra i due timeout -- imprecisione può dire che verrà a mancare alcuni dei registri o di vento fino con registri aggiuntivi.

Utilizzando un contatore è una soluzione, come altre risposte di spettacolo, ma di solito quando sto usando il complesso di temporizzazione con setInterval che richiede di cancellarlo dopo un certo numero di iterazioni, ho il refactoring di un generico promisified sleep la funzione di base setTimeout. Questo mantiene il codice chiamante molto più pulito (nessun callback) e si evita di fare confusione con clearTimeout.

Invece di un boolean per capovolgere una bandiera e indietro tra due messaggi, una soluzione migliore è quella di utilizzare un array e modulo corrente dell'indice di messaggi di lunghezza dell'array. Questo rende molto più facile per aggiungere altri elementi al ciclo e il codice è più facile da capire in quanto lo stato è implicita nel contatore.

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() viene fermato da clearInterval() non clearTimeout(). Dettagli commentato nel codice riportato di seguito.

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