Pregunta setTimeout o setInterval?


Por lo que puedo decir, estas dos piezas de javascript se comportan de la misma manera:

Opción A:

function myTimeoutFunction()
{
    doStuff();
    setTimeout(myTimeoutFunction, 1000);
}

myTimeoutFunction();

Opción B:

function myTimeoutFunction()
{
    doStuff();
}

myTimeoutFunction();
setInterval(myTimeoutFunction, 1000);

¿Hay alguna diferencia entre usar setTimeout y setInterval?


675
2018-04-08 13:11


origen


Respuestas:


Básicamente intentan hacer lo mismo, pero el setInterval enfoque será más preciso que el setTimeout enfoque, ya que setTimeout espera 1000 ms, ejecuta la función y luego establece otro tiempo de espera. Por lo tanto, el período de espera es en realidad un poco más de 1000 ms (o mucho más si su función tarda mucho tiempo en ejecutarse).

Aunque uno podría pensar que setInterval ejecutará exactamente cada 1000 ms, es importante tener en cuenta que setInterval también se retrasará, ya que JavaScript no es un lenguaje de subprocesos múltiples, lo que significa que, si hay otras partes del script en ejecución, el intervalo deberá esperar a que termine.

En este violín, puede ver claramente que el tiempo de espera se retrasará, mientras que el intervalo es casi todo el tiempo en casi 1 llamada / segundo (que el script está tratando de hacer). Si cambia la variable de velocidad en la parte superior a algo pequeño como 20 (lo que significa que intentará ejecutarse 50 veces por segundo), el intervalo nunca alcanzará un promedio de 50 iteraciones por segundo.

La demora casi siempre es insignificante, pero si estás programando algo realmente preciso, debes elegir un temporizador autoajustable (que esencialmente es un temporizador basado en tiempo de espera que se ajusta constantemente para la demora que se crea)


592
2018-04-08 13:14



Hay alguna diferencia?

Sí. A Timeout ejecuta una cierta cantidad de tiempo después de llamar a setTimeout (); un intervalo ejecuta una cierta cantidad de tiempo después del intervalo previo disparado.

Notará la diferencia si su función doStuff () tarda un poco en ejecutarse. Por ejemplo, si representamos una llamada a setTimeout / setInterval con ., un disparo del tiempo de espera / intervalo con * y la ejecución del código JavaScript con [-----], las líneas de tiempo se ven así:

Timeout:

.    *  .    *  .    *  .    *  .
     [--]    [--]    [--]    [--]

Interval:

.    *    *    *    *    *    *
     [--] [--] [--] [--] [--] [--]

La siguiente complicación es si un intervalo se dispara mientras JavaScript ya está ocupado haciendo algo (como manejar un intervalo anterior). En este caso, el intervalo se recuerda y ocurre tan pronto como el manejador anterior termina y devuelve el control al navegador. Por ejemplo, para un proceso doStuff () que a veces es corto ([-]) y a veces largo ([-----]):

.    *    *    •    *    •    *    *
     [-]  [-----][-][-----][-][-]  [-]

• representa un disparo de intervalo que no pudo ejecutar su código de inmediato, y en su lugar quedó pendiente.

Por lo tanto, los intervalos intentan "ponerse al día" para volver a la programación. Sin embargo, no hacen cola una encima de la otra: solo puede haber una ejecución pendiente por intervalo. (Si todos se pusieran en cola, el navegador quedaría con una lista en constante expansión de ejecuciones pendientes).

.    *    •    •    x    •    •    x
     [------][------][------][------]

x representa un disparo de intervalo que no pudo ejecutarse o quedar pendiente, por lo que se descartó.

Si su función doStuff () habitualmente tarda más en ejecutarse que el intervalo que se establece para ello, el navegador consumirá el 100% de la CPU tratando de repararlo, y puede volverse menos receptivo.

¿Cuál usas y por qué?

Chained-Timeout ofrece una ranura garantizada de tiempo libre para el navegador; Interval intenta asegurarse de que la función que ejecuta se ejecuta lo más cerca posible de sus horarios programados, a expensas de la disponibilidad de la interfaz de usuario del navegador.

Consideraría un intervalo para las animaciones únicas que quería que fuera lo más sencillo posible, mientras que los tiempos de espera encadenados son más educados para las animaciones en curso que se realizarían todo el tiempo mientras se carga la página. Para usos menos exigentes (como un actualizador trivial que se activa cada 30 segundos o algo así), puede usar cualquiera de los dos.

En términos de compatibilidad con el navegador, setTimeout es anterior a setInterval, pero todos los navegadores que usted encontrará hoy son compatibles con ambos. El último rezagado durante muchos años fue IE Mobile en WinMo <6.5, pero ojalá que ahora también esté detrás de nosotros.


628
2018-04-08 20:13



setInterval ()

setInterval() es un método de ejecución de código basado en el intervalo de tiempo que tiene la capacidad nativa de ejecutar repetidamente un script especificado cuando se alcanza el intervalo. Debería no ser anidado en su función de devolución de llamada por el autor del script para hacer que sea un bucle, ya que bucles por defecto. Seguirá disparando en el intervalo a menos que llame clearInterval().

Si desea codificar en bucle para animaciones o en un tic del reloj, utilice setInterval().

function doStuff() {
    alert("run your code here when time interval is reached");
}
var myTimer = setInterval(doStuff, 5000);

setTimeout ()

setTimeout() es un método de ejecución de código basado en el tiempo que ejecutará solo un script una vez cuando se alcanza el intervalo. Va a no repita de nuevo a menos que lo adapte para recorrer el script anidando el setTimeout() objeto dentro de la función a la que llama para ejecutar. Si está orientado a bucle, seguirá disparando en el intervalo a menos que llame clearTimeout().

function doStuff() {
    alert("run your code here when time interval is reached");
}
var myTimer = setTimeout(doStuff, 5000);

Si desea que suceda algo una vez después de un período de tiempo específico, utilice setTimeout(). Eso es porque solo se ejecuta una vez cuando se alcanza el intervalo especificado.


82
2017-08-14 05:12



El setInterval hace que sea más fácil cancelar la ejecución futura de su código. Si usa setTimeout, debe hacer un seguimiento de la identificación del temporizador en caso de que desee cancelarla más adelante.

var timerId = null;
function myTimeoutFunction()
{
    doStuff();
    timerId = setTimeout(myTimeoutFunction, 1000);
}

myTimeoutFunction();

// later on...
clearTimeout(timerId);

versus

function myTimeoutFunction()
{
    doStuff();
}

myTimeoutFunction();
var timerId = setInterval(myTimeoutFunction, 1000);

// later on...
clearInterval(timerId);

40
2018-04-08 13:25



Encuentro el setTimeout método más fácil de usar si desea cancelar el tiempo de espera:

function myTimeoutFunction() {
   doStuff();
   if (stillrunning) {
      setTimeout(myTimeoutFunction, 1000);
   }
}

myTimeoutFunction();

Además, si algo sale mal en la función, solo dejará de repetirse en el primer error, en lugar de repetir el error cada segundo.


20
2018-04-08 14:20



La misma diferencia está en sus propósitos.

setInterval()
   -> executes a function, over and over again, at specified time intervals  

setTimeout()
   -> executes a function, once, after waiting a specified number of milliseconds

Es tan simple como eso

Detalles más elaborados aquí http://javascript.info/tutorial/settimeout-setinterval


14
2018-01-11 10:16



Cuando ejecuta alguna función dentro de setInterval, que funciona más tiempo que timeout-> el navegador se bloqueará.

 - P.ej., hacer cosas() toma 1500 seg. para ser ejecutado y lo haces: setInterval (doStuff, 1000);
1) Ejecutar navegador hacer cosas() que toma 1.5 segundos para ser ejecutado;
2) Después de ~ 1 segundo, intenta ejecutar hacer cosas() de nuevo. Pero anterior hacer cosas() todavía se ejecuta-> entonces el navegador agrega esta ejecución a la cola (para ejecutar después de que el primero está hecho).
3,4, ...) Lo mismo se agrega a la cola de ejecución para las siguientes iteraciones, pero hacer cosas()de previos todavía están en progreso ...
  Como resultado, el navegador está atascado.

Para evitar este comportamiento, la mejor manera es ejecutar setTimeout dentro de setTimeout para emular setInterval.
Para corregir los tiempos de espera entre llamadas setTimeout, puede usar alternativa de autocorrección al setInterval de JavaScript técnica.


11
2018-04-26 17:42