Интерпретация таймеров JavaScript I

Примечание. Эта статья взята из книги Джона Резига «Секреты ниндзя JavaScript». Я перевел ее только для всеобщего ознакомления. Пожалуйста, поправьте меня, если в переводе есть какие-либо недостатки.

В этой статье в основном объясняется таймер со следующих аспектов:

1. Обзор таймера;
2. Углубленный анализ скорости таймера;
3. Используйте таймеры для решения больших задач;
4. Используйте таймеры для управления анимацией;
5. Лучшее тестирование таймера

Таймеры — это то, о чем мы мало понимаем, и ими часто злоупотребляют. Это особенность JavaScript. На самом деле, это может нам очень помочь в разработке сложных приложений. Таймеры предоставляют возможность асинхронно задерживать выполнение фрагментов кода. JavaScript по своей сути является однопоточным (только часть js-кода может выполняться в течение определенного диапазона времени). Таймеры дают нам возможность обойти это ограничение, открывая таким образом. другой способ выполнения кода.

Интересно, что вопреки общепринятому мнению, таймеры не являются частью языка JavaScript, а являются частью методов и объектов, представленных браузером. Это означает, что если вы решите запустить его в среде, отличной от браузера, скорее всего, таймер не будет существовать, и вам придется реализовать свою собственную версию, используя определенные функции (например, потоки Rhino).

1. Как работает таймер

По сути, важно понимать, как работают таймеры. Часто поведение таймера не интуитивно понятно, потому что оно находится в отдельном потоке, начнём с теста трёх функций, для каждой из которых у нас есть возможность построить таймер и управлять им.

• var id = setTimeout(fn,delay); запускает таймер, который вызовет определенную функцию по истечении времени задержки. Функция возвращает уникальный идентификатор, с помощью которого таймер можно отменить позднее;
• var id = setInterval(fn,delay); аналогично setTimeout, но вызывает функцию непрерывно (с определенным временем задержки), пока она не будет отменена;
• clearInterval(id),clearTimeout(id); принимает идентификатор таймера (возвращенный любой из вышеперечисленных функций) и прекращает вызов таймера.

Чтобы понять, как таймеры работают внутри, необходимо обсудить важную концепцию: задержки не гарантированы. Поскольку весь JavaScript в браузере выполняется в одном потоке, асинхронные события (такие как щелчки мыши, таймеры) будут выполняться только тогда, когда во время выполнения существует открытое состояние. Следующий пример хорошо иллюстрирует эту проблему:

На этой диаграмме много информации, которую нужно усвоить, ее полное понимание даст вам лучшее представление об асинхронном выполнении js, диаграмма одномерная, в вертикальном направлении указано время (настенные часы), измеряемое в миллисекундах. Синий прямоугольник представляет долю выполнения js. Например, запуск первого блока javascript занимает около 18 секунд, щелчок мыши — около 11 секунд и так далее.