Interpretación de temporizadores de JavaScript I

Nota: Este artículo es un extracto del libro "Secrets of the JavaScript Ninja" de John Resig . Lo traduje solo para que todos lo aprendan. Corríjame si hay alguna deficiencia en la traducción.

Este artículo explica principalmente el temporizador desde los siguientes aspectos:

1. Resumen del temporizador;
2. Análisis en profundidad de la velocidad del temporizador;
3. Utilice temporizadores para realizar tareas grandes;
4. Utilice temporizadores para gestionar animaciones;
5. Mejores pruebas de temporizador

Los temporizadores son algo de lo que entendemos poco y a menudo se abusa de ellos. Son una característica de JavaScript. De hecho, puede ayudarnos mucho en el desarrollo de aplicaciones complejas. Los temporizadores brindan la capacidad de retrasar de forma asincrónica la ejecución de fragmentos de código. JavaScript es inherentemente de un solo subproceso (solo una parte del código js puede ejecutarse dentro de un cierto rango de tiempo) Los temporizadores nos brindan una manera de evitar esta limitación. hasta otra forma de ejecutar el código.

Curiosamente, contrariamente a la creencia comúnmente aceptada, los temporizadores no son parte del lenguaje JavaScript, sino parte de los métodos y objetos introducidos por el navegador. Esto significa que si elige ejecutarlo en un entorno sin navegador, es probable que el temporizador no exista y tendrá que implementar su propia versión utilizando una funcionalidad específica (como los subprocesos de Rhino).

1. Cómo funciona el cronómetro

Fundamentalmente, es importante entender cómo funcionan los temporizadores. A menudo el comportamiento de un temporizador no es intuitivo porque está en un hilo separado. Comencemos con una prueba de tres funciones, para cada una de las cuales tenemos la oportunidad de construir y controlar el temporizador.

• var id = setTimeout(fn,delay); inicia un temporizador que llamará a una función específica después del tiempo de retraso. La función devuelve una ID única, mediante la cual el temporizador se puede cancelar en un momento posterior;
• var id = setInterval(fn,delay); similar a setTimeout, pero llama continuamente a la función (en ciertos tiempos de retraso) hasta que se cancela;
• clearInterval(id), clearTimeout(id); acepta el ID del temporizador (devuelto por cualquiera de las funciones anteriores) y deja de llamar al temporizador.

Para comprender cómo funcionan internamente los temporizadores, es necesario analizar un concepto importante: los retrasos no están garantizados. Dado que todo JavaScript en el navegador se ejecuta en un solo subproceso, los eventos asincrónicos (como clics del mouse, temporizadores) solo se ejecutarán cuando haya un estado abierto durante la ejecución. El siguiente ejemplo ilustra bien este problema:

Hay mucha información para digerir en este diagrama, comprenderlo completamente le dará una mejor idea de la ejecución asincrónica de js, el diagrama es unidimensional, en la dirección vertical está el tiempo (reloj de pared), medido en milisegundos. El cuadro azul representa la proporción de ejecución de js. Por ejemplo, el primer bloque de JavaScript tarda unos 18 segundos en ejecutarse, el clic del ratón tarda unos 11 segundos y así sucesivamente.