Interpretando temporizadores javascript I

Nota: Este artigo foi extraído do livro "Secrets of the JavaScript Ninja" de John Resig . Eu o traduzi apenas para o aprendizado de todos. Corrija-me se houver alguma deficiência na tradução.

Este artigo explica principalmente o cronômetro a partir dos seguintes aspectos:

1. Visão geral do temporizador;
2. Análise aprofundada da velocidade do temporizador;
3. Use temporizadores para lidar com tarefas grandes;
4. Use temporizadores para gerenciar animações;
5. Melhores testes de cronômetro

Timers são algo sobre os quais entendemos pouco e são frequentemente usados ​​de forma abusiva. Eles são um recurso do JavaScript. Na verdade, pode nos ajudar muito no desenvolvimento de aplicações complexas. Os temporizadores fornecem a capacidade de atrasar de forma assíncrona a execução de fragmentos de código. O JavaScript é inerentemente de thread único (apenas parte do código js pode ser executado dentro de um determinado intervalo de tempo). criar outra maneira de executar o código.

Curiosamente, ao contrário da crença comumente aceita, os temporizadores não fazem parte da linguagem JavaScript, mas sim dos métodos e objetos introduzidos pelo navegador. Isso significa que se você optar por executá-lo em um ambiente que não seja de navegador, é provável que o cronômetro não exista e você tenha que implementar sua própria versão usando funcionalidades específicas (como threads do Rhino).

1. Como funciona o cronômetro

Fundamentalmente, é importante entender como funcionam os temporizadores. Muitas vezes o comportamento de um timer não é intuitivo porque está em uma thread separada, vamos começar com um teste de três funções, para cada uma das quais temos a oportunidade de construir e controlar o timer.

• var id = setTimeout(fn,delay); inicia um cronômetro que chamará uma função específica após o tempo de atraso. A função retorna um ID exclusivo, com o qual o cronômetro pode ser cancelado posteriormente;
• var id = setInterval(fn,delay); semelhante a setTimeout, mas chama continuamente a função (em determinados tempos de atraso) até que seja cancelada;
• clearInterval(id), clearTimeout(id); aceita o ID do timer (retornado por qualquer uma das funções acima) e para de chamar o timer.

Para entender como funcionam os timers internamente, há um conceito importante que precisa ser discutido: atrasos não são garantidos. Como todo JavaScript no navegador é executado em um único thread, eventos assíncronos (como cliques do mouse, temporizadores) só serão executados quando houver um estado aberto durante a execução.

Há muitas informações para digerir neste diagrama, entendê-lo completamente lhe dará uma ideia melhor da execução assíncrona de js, o diagrama é unidimensional, na direção vertical está o tempo (relógio de parede), medido em milissegundos. A caixa azul representa a proporção de execução de js. Por exemplo, o primeiro bloco javascript leva cerca de 18 segundos para ser executado, o clique do mouse leva cerca de 11 segundos e assim por diante.