¿Cómo puedo realizar un simple conmutador de operación en JavaScript con la ayuda de setInterval()?

0

Pregunta

Esto es lo que mi código es:

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

clearTimeout(fnInterval, 10000)

Yo soy un novato en JavaScript y mi objetivo aquí es el de registro de la consola un mensaje cada 1 segundo para una duración total de 10 segundos, pero durante cada intervalo quiero que mi mensaje para cambiar su valor entre "hola" y "adiós" . ¿Cómo puedo hacerlo? (a partir de ahora se muestra el valor por defecto de los booleanos y de no cambiar más adelante)

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

Mejor respuesta

0

Mueva el indicador de la variable de la función:

let b = true;

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

Para detener el temporizador después de 10000 milisegundos, envuelva la llamada a clearInterval en un setTimeout:

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

Mientras tanto, tenga en cuenta que el valor de retorno de setInterval no es una función sino un número, por lo que puede ser engañosa para llamar fnInterval.

2021-11-24 08:11:57
0

Primero de todo, declarar let b = true fuera de la función de devolución de llamada. Es re-inicializado en cada llamada de otra manera.

En segundo lugar, el 10000 en clearTimeout(fnInterval, 10000) no es un parámetro válido. clearTimeout(timeoutId) acepta sólo el primer parámetro y borra el tiempo de espera pasó inmediatamente. Necesitarías setTimeout para activar esto después de 10 segundos, si ese es tu objetivo. Pero que causa una condición de carrera entre los dos tiempos de espera -- imprecisión puede significar que vas a perder algunos de los registros de viento o con extra de registros.

El uso de un contador es una solución, como otras respuestas muestran, pero generalmente cuando estoy utilizando complejos de tiempo con setInterval que requiere de compensación después de un cierto número de iteraciones, yo refactorizar a un genérico promisified sleep función que se basa en setTimeout. Esto mantiene el llamado código mucho más limpio (no las devoluciones de llamada) y evita jugar con clearTimeout.

En lugar de un valor booleano para voltear una bandera de ida y vuelta entre dos mensajes, la mejor solución es utilizar una matriz y el módulo, el índice actual de los mensajes de la matriz de longitud. Esto hace que sea mucho más fácil para agregar más elementos a recorrer y el código es más fácil de entender ya que el estado está implícita en el mostrador.

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() es detenido por clearInterval() no clearTimeout(). Los detalles se comentó en el código de abajo.

// 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

En otros idiomas

Esta página está en otros idiomas

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