javascript - example - while(true) vs setInterval(function(), 0)
javascript html ejemplos (5)
Esta pregunta ya tiene una respuesta aquí:
setInterval ()
Llama a una función o ejecuta un fragmento de código repetidamente, con un retraso de tiempo fijo entre cada llamada a esa función.
mientras()
Crea un bucle que ejecuta una instrucción especificada siempre que la condición de prueba se evalúe como verdadera. La condición se evalúa antes de ejecutar la sentencia.
Si uso while(true)
para ejecutar una declaración específica, mi navegador se bloquea ( Firefox ), se retrasa ( Opera ) o la instrucción no se ejecutará ( Chrome ), pero si usé setInterval()
con un tiempo fijo de 0 segundos , todo funciona perfectamente, aunque solo sean 0 segundos, y while(true)
no puede ser lógicamente más rápido que 0 segundos, pero ¿por qué sucede esto?
mientras que () ejemplo:
<!DOCTYPE html>
<html>
<body>
<div id="counter"></div>
<script>
var i = 0;
while (true)
{
document.getElementById("counter").innerHTML += i++;
}
</script>
</body>
</html>
Ejemplo de setInterval () :
<!DOCTYPE html>
<html>
<body>
<div id="counter"></div>
<script>
var i = 0;
setInterval(function() { counter() }, 0);
function counter()
{
document.getElementById("counter").innerHTML += i++;
}
</script>
</body>
</html>
¿Tiene una razón particular para usar un bucle sin fin, e incluso, manipular el DOM con cada paso?
Si usa el bucle while, lo más probable es que bloquee el navegador y el cliente completamente, lo que también causa una posible sobrecarga de la CPU si no se termina de alguna manera.
El bucle while
trata de finalizar su trabajo en los microsegundos más mínimos posibles. Por lo tanto, incluso puede intentar ejecutar un millón de pasos en un posible segundo, y tal vez incluso más, en este caso depende del cliente. Sin embargo, a tal velocidad la actualización del DOM no sería posible.
En el caso de setInterval
, es bastante diferente del ciclo while, de hecho, es más apropiado llamarlo function repeater
. Repite la función dada después de que se pasa el tiempo dado. Entonces, incluso si el tiempo es 0, tiene un paso en el que comprueba if the waiting time has passed now, and should the next repeat be run
.
Así que puedes considerar mientras que el bucle es más instantáneo que de 0 segundos de retraso.
Hay una gran diferencia que implica el bloqueo. En primer lugar, el bucle while bloqueará la CPU del usuario porque se ejecutará para siempre sin detenerse y ocupará el 100% del procesador. setInterval
realidad tiene una cantidad mínima que es implícita, y depende del navegador. Creo que es alrededor de 10ms. Por lo tanto, su setInterval
realidad solo se ejecuta durante un milisegundo o, por lo tanto, se realiza esa simple actualización, una vez cada 10 ms. Esto es duro para el procesador, pero no requerirá el 100% del procesador y puede ser mitigado con la administración de tareas por el sistema operativo.
Javascript en los navegadores es de un solo hilo y es impulsado por eventos . No hay dos cosas que se ejecuten simultáneamente, nunca, y el bucle de eventos es el rey. Si su JS nunca cede el control de un solo hilo (al finalizar una función), entonces nada más puede usar el hilo. El mismo hilo maneja JS y DOM, por lo que el usuario no puede desplazarse ni hacer clic en nada si su JS está acaparando el hilo.
setInterval
(o incluso setTimeout
) con un retraso de 0 (milisegundos, no segundos) solo significa agregar esta función a la cola de eventos después del retraso dado, no hay garantía de que la función se ejecute a esa hora exacta.
EDITAR: en realidad, los trabajadores web pueden ejecutar JS al mismo tiempo que el hilo principal del navegador, pero no ven nada de la misma memoria / no pueden acceder al DOM, por lo que los puntos / suposiciones anteriores aún se mantienen, más o menos. .. Si desea ingresar a los trabajadores web, querrá una buena comprensión de JS / programación funcional.
EDITAR (otra vez): ¿Por qué quieres hacer un bucle para siempre? Si está realizando una encuesta (por la única razón que se me ocurrió), no lo haga. Casi siempre hay una mejor manera, especialmente en JS. La forma funcional es definir la función que desea que se ejecute cuando ocurra un evento (lo que buscaba) y luego adjuntar esa función al evento (la forma en que haga esto depende del evento).
while (verdadero) bloqueará cualquier ejecución hasta que finalice el ciclo condicional, lo que ya sabemos que nunca ocurrirá. (Cromo)
setInterval le dice al entorno que ejecute código arbitrario cada x milisegundos, no bloqueará su navegador porque el "planificador" todavía tiene el control.
while(1)
genera un bucle infinito, es decir, JavaScript simplemente se ejecutará para siempre y nunca le devolverá el control al navegador, que por lo tanto se congela, porque no puede volver a hacer nada más (hasta que se elimine la secuencia de comandos).setTimeout(func, 0)
comporta de manera diferente en el sentido de que después de ejecutarse, el control se devuelve al navegador, que puede decidir qué hacer después. Establecer 0ms ensetTimeout
no garantiza que el código JavaScript se ejecute directamente después de que se detenga. Con el parámetro 0ms, simplemente le dice al navegador que le gustaría que el código se ejecute directamente después de que se detenga, pero el navegador es libre de hacer otra cosa completamente antes de hacerlo.