Como faço para realizar uma simples alternância de operação em JavaScript com a ajuda de setInterval()?

0

Pergunta

Este é o meu código tem o seguinte aspecto:

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

clearTimeout(fnInterval, 10000)

Eu sou um novato para o JavaScript e o meu objetivo aqui é de log do console uma mensagem a cada 1 segundo para uma duração total de 10 segundos, mas durante cada intervalo, eu quero a minha mensagem para alternar seu valor entre "oi" e "tchau" . Como posso fazer isso? (agora ele exibe o valor para o padrão boolean e não muda mais tarde)

javascript
2021-11-24 06:12:17
3

Melhor resposta

0

Mova o sinalizador variável fora da função:

let b = true;

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

Para parar o temporizador depois de 10000 milisegundos, encapsular a chamada para o clearInterval em um setTimeout:

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

Entretanto, observe que o valor de retorno de setInterval não é uma função, mas um número, portanto, pode ser enganador para chamá-lo de fnInterval.

2021-11-24 08:11:57
0

Primeiro de tudo, declarar let b = true fora da função de retorno de chamada. É re-inicializado em cada chamada de outra forma.

Em segundo lugar, a 10000 em clearTimeout(fnInterval, 10000) não é um parâmetro válido. clearTimeout(timeoutId) aceita apenas o primeiro parâmetro e limpa o tempo de espera passou-se imediatamente. Você precisa de um setTimeout para acionar esta, após 10 segundos, se esse é o seu objetivo. Mas o que faz com que uma condição de corrida entre os dois tempos de espera -- imprecisão pode significar que você vai perder alguns dos logs ou acabar com o extra de logs.

Utilizando um contador é uma solução, como outras respostas mostram, mas normalmente quando eu estou usando complexos de tempo com setInterval que requer limpá-lo depois de um certo número de iterações, eu refatorar para um genérico promisified sleep função com base na setTimeout. Isso mantém o chamado código muito mais limpo (sem retornos de chamada) e evita mexer com clearTimeout.

Em vez de um valor booleano para virar um sinalizador para trás e para a frente entre duas mensagens, uma solução melhor é usar uma matriz e módulo de elasticidade o atual índice pelas mensagens comprimento da matriz. Isso torna muito mais fácil para adicionar mais itens para percorrer e o código é mais fácil de entender, pois o estado está implícita no contador.

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

2021-11-24 06:17:50
0

setInterval() é interrompido por clearInterval() não clearTimeout(). Detalhes são comentadas no código abaixo.

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

2021-11-24 06:31:05

Em outros idiomas

Esta página está em outros idiomas

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................