setTimeout o setInterval?

Question

Por lo que yo 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 ?

Answer 1

En esencia, tratan de hacer lo mismo, pero el enfoque setInterval será más preciso que el enfoque setTimeout, ya setTimeout espera 1000ms, se ejecuta la función y luego establece otro tiempo de espera. Por lo que el periodo de espera es en realidad un poco más de 1000 ms (o mucho más si su función toma un largo tiempo para su ejecución).

Altough uno podría pensar que setInterval ejecutará exactamente cada 1000 ms, es importante tener en cuenta que setInterval también retrasará, ya que JavaScript no es un lenguaje multi-hilo, lo que significa que - si hay otras partes de la secuencia de comandos en ejecución -. el intervalo tendrá que esperar a que a fin

este violín , se puede ver claramente que el tiempo de espera se queda atrás, mientras que el intervalo es casi todo el tiempo en casi 1 llamada / segundo (que el guión está tratando de hacer). Si cambia la variable de velocidad en la parte superior de algo pequeño como 20 (lo que significa que se trate de correr 50 veces por segundo), el intervalo será nunca llegar a un promedio de 50 iteraciones por segundo.

El retraso es casi siempre insignificante, pero si usted está programando algo muy preciso, hay que ir por un autoajustable temporizador (que esencialmente es un contador de tiempo basada en el tiempo de espera que se ajusta constantemente para el retraso que ha creado)

Answer 2

  

¿Hay alguna diferencia?

Sí. Un tiempo de espera realiza una cierta cantidad de tiempo después de setTimeout () se llama; un intervalo realiza una cierta cantidad de tiempo después del intervalo anterior despedido.

Usted notará la diferencia si su función hacerTarea () toma un tiempo para ejecutar. Por ejemplo, si representamos una llamada a setTimeout / setInterval con ., un disparo del tiempo de espera / intervalo con * y la ejecución de código JavaScript en la [-----], las líneas de tiempo se ven como:

Timeout:

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

Interval:

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

La siguiente complicación es si un intervalo incendios mientras JavaScript ya está ocupado haciendo algo (como el manejo de un intervalo anterior). En este caso, el intervalo es recordado, y sucede tan pronto como los acabados de controlador anteriores y devuelve el control al navegador. Así, por ejemplo para un proceso hacerTarea () que a veces es corta ([-]) y, a veces largo ([-----]):

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

• representa un tiro intervalo que no podría ejecutar su código de inmediato, y se hizo a la espera de su lugar.

Así intervalos tratan de ‘ponerse al día’ para volver a la programación. Sin embargo, ellos no hacen cola una encima de la otra: sólo puede haber un único pendientes de ejecutar por intervalo. (Si todos ellos hicieron cola, el navegador se quedaría con una lista cada vez mayor de ejecuciones pendientes!)

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

x representa un disparo intervalo que no podría ejecutar o realizar pendiente, así que en vez se descartó.

Si su función hacerTarea () realiza habitualmente más en ejecutarse que el intervalo que se establece para él, el navegador va a comer el 100% de la CPU tratando de darle servicio, y puede llegar a ser menos sensible.

  

¿Qué hace que utiliza y por qué?

Encadenado-Tiempo de espera da una ranura garantizado de tiempo libre para el navegador; Intervalo trata de garantizar la función que se está ejecutando se ejecuta lo más cerca posible a sus horarios programados, a expensas de la disponibilidad del navegador de interfaz de usuario.

Yo consideraría un intervalo para una sola vez animaciones que quería ser lo más suave posible, mientras que los tiempos de espera son encadenados más amable para las animaciones en curso que tendrían lugar todo el tiempo mientras se carga la página. Para usos menos exigentes (como un actualizador trivial disparando cada 30 segundos o algo así), se puede utilizar con seguridad tampoco.

En cuanto a la compatibilidad del navegador, setTimeout anterior a setInterval, pero todos los navegadores que se reunirán hoy apoyan ambos. El último rezagado durante muchos años fue el móvil del IE en Windows Mobile <6,5, pero es de esperar que ahora también está detrás de nosotros.

Answer 3

setInterval ()

setInterval() es un método de ejecución de código basada intervalo de tiempo que tiene la capacidad nativa para ejecutar repetidamente un script especificado cuando se alcanza el intervalo. Debe no anidarse en su función de devolución de llamada por el autor de la escritura para que sea de bucle, ya que bucles de forma predeterminada . Asimismo, mantendrá tiro en el intervalo de menos que llame clearInterval().

Si desea código de bucle para animaciones o en un ciclo de reloj, a continuación, utilizar setInterval().

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

setTimeout ()

setTimeout() es un método basado en el tiempo de ejecución de código que se ejecutará una secuencia de comandos sólo una vez cuando se alcanza el intervalo. Será no repetir de nuevo a menos que lo orientan hacia bucle de la secuencia de comandos anidando el objeto setTimeout() dentro de la función que llama a ejecutar. Si orientado a bucle, que se mantendrá en el intervalo de disparo a menos que llame clearTimeout().

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

Si quieres que algo suceda una vez después de un período de tiempo determinado, a continuación, utilizar setTimeout(). Esto es debido a que sólo se ejecuta una vez cuando se alcanza el intervalo especificado.

Answer 4

El setInterval hace que sea más fácil para cancelar la ejecución futura de su código. Si utiliza setTimeout, se debe realizar un seguimiento de la identificación del contador de tiempo en caso de que desee cancelar más adelante.

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

myTimeoutFunction();

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

frente

function myTimeoutFunction()
{
    doStuff();
}

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

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

Answer 5

Me parece que el método setTimeout 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 puede ir mal en la función se acaba de dejar de repetir en el primer error de tiempo, en lugar de repetir el error cada segundo.

Answer 6

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

Answer 7

Al ejecutar alguna función dentro setInterval, que trabaja más tiempo que timeout-> será atrapado el navegador.

- por ejemplo, hacerTarea () tiene 1.500 seg. siendo ejecutar y lo hace: setInterval (hacerTarea, 1000);
1) Browser de ejecución doStuff () que tiene 1,5 seg. para ser ejecutado; Página 2) Después de ~ 1 segundo intenta ejecutar hacerTarea () de nuevo. Pero anterior hacerTarea () es todavía executed-> modo navegador añade esta carrera a la cola (para ejecutar después de la primera se hace).
3,4, ..) La misma adición a la cola de ejecución para los próximos iteraciones, pero hacerTarea () de anteriores están todavía en curso ...
A medida que el resultado- el navegador está atascado.

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

Answer 8

Yo uso setTimeout.

Al parecer, la diferencia es el método setTimeout llama una vez, setInterval llama repeatdly.

Aquí está un buen artículo que explica la diferencia: Tutorial: temporizadores JavaScript con setTimeout y setInterval

Answer 9

He hecho simple prueba de setInterval(func, milisec), porque tenía curiosidad lo que ocurre cuando el consumo de tiempo de la función es mayor que la duración del intervalo.

setInterval general calendario siguiente iteración justo después de la Inicio de la iteración anterior, menos que la función está todavía en curso . Si es así, setInterval esperará, hasta que termina la función. Tan pronto como esto sucede, la función se dispara de nuevo inmediatamente - no hay que esperar para la siguiente iteración de acuerdo al programa (como lo sería en condiciones sin función de tiempo excedido). Tampoco hay una situación de iteraciones paralelas que corren.

He probado esto en Chrome v23. Espero que sea determinista aplicación en todos los navegadores modernos.

window.setInterval(function(start) {
    console.log('fired: ' + (new Date().getTime() - start));
    wait();
  }, 1000, new Date().getTime());

salida de la consola:

fired: 1000    + ~2500 ajax call -.
fired: 3522    <------------------'
fired: 6032
fired: 8540
fired: 11048

La función wait es sólo un bloqueo ayudante de hilo - llamada AJAX síncrona que tiene exactamente 2500 milisegundos de procesamiento en el lado del servidor:

function wait() {
    $.ajax({
        url: "...",
        async: false
    });
}

Answer 10

Su código tendrá diferentes intevals de ejecución, y en algunos proyectos, como los juegos en línea no es aceptable. En primer lugar, ¿qué debe hacer, para hacer su trabajo de código con los mismos intevals, debe cambiar "myTimeoutFunction" a esto:

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

Después de este cambio, será igual a

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

Pero, de todas maneras tendrá no resultado estable, debido a JS es de un solo subproceso. Por ahora, si el hilo JS estará ocupado con algo, no va a ser capaz de ejecutar su función de devolución de llamada, y la ejecución se pospuso por 2-3 mseg. Es lo que tiene más de 60 ejecuciones por segundo, y cada vez que tenga al azar retardo 1-3 seg, será absolutamente inaceptable (después de un minuto que será de alrededor de 7200 ms de retardo), y me puede asesorar a usar algo como esto:

    function Timer(clb, timeout) {
        this.clb = clb;
        this.timeout = timeout;
        this.stopTimeout = null;
        this.precision = -1;
    }

    Timer.prototype.start = function() {
        var me = this;
        var now = new Date();
        if(me.precision === -1) {
            me.precision = now.getTime();
        }
        me.stopTimeout = setTimeout(function(){
            me.start()
        }, me.precision - now.getTime() + me.timeout);
        me.precision += me.timeout;
        me.clb();
    };

    Timer.prototype.stop = function() {
        clearTimeout(this.stopTimeout);
        this.precision = -1;
    };

    function myTimeoutFunction()
    {
        doStuff();
    }

    var timer = new Timer(myTimeoutFunction, 1000);
    timer.start();

Este código garantizará período de ejecución estable. Incluso hilo será ocupado, y su código se ejecutará después de 1005 msegundos, la próxima vez que tendrá tiempo de espera para 995 mseg, y el resultado será estable.

Answer 11

Para mirar un poco diferente: setInterval asegura que el código se ejecuta en cada intervalo dado (es decir, 1000 ms, o la cantidad que se especifica), mientras que setTimeout establece el tiempo que 'espera hasta que' se ejecuta el código. Y puesto que se necesita milisegundos adicionales para ejecutar el código, que se suma a 1000ms y por lo tanto, setTimeout se ejecuta de nuevo, a veces inexactos (más de 1000 ms).

Por ejemplo, temporizadores de cuenta atrás / no se hacen con setTimeout, que se hace con setInterval, para asegurarse de que no se demora y el código se ejecuta en el intervalo exacto dado.

Answer 12

Tanto setInterval y setTimeout devolver un identificador de temporizador que se puede utilizar para cancelar la ejecución, es decir, antes de que se desencadenan los tiempos de espera. Para cancelar llama a cualquiera clearInterval o clearTimeout como esto:

var timeoutId = setTimeout(someFunction, 1000);
clearTimeout(timeoutId);
var intervalId = setInterval(someFunction, 1000),
clearInterval(intervalId);

Además, los tiempos de espera se cancelan automáticamente cuando salga de la página o cerrar la ventana del navegador.

Answer 13

Bueno, setTimeout es mejor en una situación, como acabo de aprender. Siempre uso setInterval, que me quedan por ejecutar en segundo plano durante más de media hora. Cuando cambié de nuevo a esa pestaña, la presentación de diapositivas (en el que se utilizó el código) estaba cambiando muy rápidamente, en lugar de cada 5 segundos que debería tener. Es, de hecho, no vuelva a suceder como lo prueba más y si es culpa del navegador o no no es importante, ya que con setTimeout esa situación es completamente imposible.

Answer 14

Puede validar respuesta bobince por sí mismo cuando se ejecuta las siguientes javascript o comprobar esto jsFiddle

<div id="timeout"></div>
<div id="interval"></div>

var timeout = 0;
var interval = 0;

function doTimeout(){
    $('#timeout').html(timeout);
    timeout++;
    setTimeout(doTimeout, 1);
}

function doInterval(){
    $('#interval').html(interval);
    interval++;
}

$(function(){
    doTimeout();
    doInterval();
    setInterval(doInterval, 1);
});

Answer 15

La diferencia es evidente en la consola:

Answer 16

Simplemente añadiendo a lo que ya se ha dicho, pero la versión setTimeout del código también se llega a la Maximum call stack size que detener su funcionamiento. Puesto que no hay caso base para la función recursiva para detenerse en lo que no puede hacer que se ejecute para siempre.

Answer 17

Creo SetInterval y SetTimeout son diferentes. SetInterval ejecuta el bloque de acuerdo con el tiempo establecido mientras que, SetTimeout ejecuta el bloque de código una vez.

Trate de este conjunto de códigos después de los segundos de tiempo de espera de cuenta atrás:

setInterval(function(e){
    alert('Ugbana Kelvin');
}, 2000);

y luego tratar

setTimeout(function(e){
    alert('Ugbana Kelvin');
}, 2000);

Puede ver las diferencias por sí mismo.