Cum pot efectua o simplă operație de comutare în JavaScript cu ajutorul setInterval()?

Muta steagul variabilă din funcția:

let b = true;

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

Pentru a opri cronometrul după 10000 de milisecunde, folie apelul la clearInterval într-un setTimeout:

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

Între timp, rețineți că valoarea de returnare a setInterval nu este o funcție, ci un număr, astfel încât acesta poate fi înșelătoare să-l numesc fnInterval.

Mai întâi de toate, să declare let b = true în afară de funcția de apel invers. E re-inițializate pe fiecare suna altfel.

În al doilea rând, 10000 în clearTimeout(fnInterval, 10000) nu este un parametru valabil. clearTimeout(timeoutId) acceptă doar primul parametru și respinga de expirare a trecut imediat. Ai nevoie de un setTimeout pentru a declanșa această după 10 secunde, daca asta e scopul tau. Dar care cauzează o condiție cursă între cele două timeout -- imprecizia poate însemna o să pierzi din busteni sau eoliene cu extra busteni.

Cu ajutorul unui contor este o soluție, ca și alte răspunsuri spectacol, dar, de obicei, atunci când eu sunt, folosind complexe de sincronizare cu setInterval care necesită compensare după un anumit număr de iterații, am refactor la un generic promisified sleep funcția bazat pe setTimeout. Acest lucru ține de asteptare cod mult mai curat (nu callback) și evită joc cu clearTimeout.

În loc de un boolean pentru a răsturna un steag și înapoi între două mesaje, o soluție mai bună este de a folosi o matrice și modul indicele curent de mesaje de lungime matrice. Acest lucru face mult mai ușor pentru a adăuga mai multe elemente pentru a parcurge și codul este mai ușor de înțeles din moment ce statul este implicită în tejghea.

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() este oprit de clearInterval() nu clearTimeout(). Detaliile sunt comentate în codul de mai jos.

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