Використання таймеру в JavaScript
ADO в Delphi AJAX Android C++ CakePHP CMS COM CSS Delphi Flash Flex HTML Internet Java JavaScript MySQL PHP RIA SCORM Silverlight SQL UML XML Бази даних Веб-розробка Генетичні алгоритми ГІС Гітара Дизайн Економіка Інтелектуальні СДН Колір Масаж Математика Медицина Музика Нечітка логіка ООП Патерни Подання знань Розкрутка сайту, SEO САПР Сесії в PHP Системне програмування Системний аналіз Тестологія Тестування ПЗ Фреймворки Штучний інтелект
|
Використання таймеру в JavaScript
Как работают таймеры в JavaScriptПримечание: ниже перевод заметки John Resig "How JavaScript Timers Work", в которой автор jQuery ясно и подробно излагает тонкости работы различных методов отложенного исполнения функций. Мои комментарии по клиентской производительности далее курсивом. На самом фундаментальном уровне чрезвычайно важно представлять, как работают таймеры в JavaScript. Очень часто работа таймеров кажется противоречащей интуиции в силу того, что все они запущены внутри одного потока. Но давайте начнем с характеристики трех основных функций, которые мы используем, чтобы создавать и управлять нашими таймерами.
Для того чтобы уяснить внутренние аспекты работы таймеров, стоит учесть одну важную деталь, которую стоит упомянуть: задержка при выполнении таймера не гарантируется. Так как весь JavaScript исполняется в браузере в один поток, то асинхронные события (например, клики мышкой или таймеры) запускаются только по возникновению «окна» в этом основном потоке (обработчики событий и вызываемые функции, фактически, «встраиваются» в основной поток выполнения, подробнее об организации тяжелых вычислений). Лучше всего это можно продемонстрировать с помощью следующей диаграммы: Рисунок 1. Схема работы таймеров в JavaScript Поток асинхронных событийНа этой диаграмме дано довольно много информации к размышлению, однако, ее полное понимание позволит вам гораздо лучше представлять, как работают асинхронные вызовы в JavaScript. На диаграмме изображена всего одна ось — по вертикали отложено время (настенные часы, wall clock) в миллисекундах. Голубыми блоками отмечены происходящие вызовы JavaScript. Например, первый блок JavaScript исполняется примерно 18мс, блок с кликом мыши примерно 11мс и т.д.. Из-за того, что JavaScript может исполнять одновременно только один кусок кода (так как является однопоточным по самой своей структуре), каждый из этих блоков «блокирует» выполнение других асинхронных событий. Это означает, что при возникновении асинхронного события (например, клика мыши, срабатывания таймера или завершения Для начала, внутри первого блока JavaScript устанавливаются два таймера: на 10мс через Дополнительно, внутри этого первого блока JavaScript у нас имеется клик мыши. Внутренние обработчики JavaScript, связанные с этим асинхронным событием (мы никогда не знаем, когда именно пользователь нажмет на кнопку мыши, поэтому и рассматриваем это событие как асинхронное), не могут быть выполнены сразу после данного события, так как и выставленный таймер, поэтому они откладываются до более удобного случая в будущем. «Умная» очередьПосле того как наш первый блок JavaScript-кода закончит исполнение (наконец-то!), браузер тут же смотрит в очередь: что должно быть выполнено в следующий момент? В этом случае и клик мыши, и таймер ждут своей очереди на выполнение. Браузер берет один из них (обработчик клика мыши) и немедленно запускает его выполнение. Таймер будет ждать следующего удобного момента для того, чтобы выполниться. Заметим, что обработчик клика мыши выполняется прежде, чем первый таймер. из-за этого выполнение таймера откладывается. Однако, стоит обратить внимание, Что при последующем срабатывании того же таймера ( Фактически, это мы и видим в том случае, когда вызывается обработчик после третьего интервала, при этом еще не закончил свой исполнение предыдущий обработчик. Что демонстрирует удивительный факт: постановка выполнения функции через интервалы не зависит от текущего исполнения чего бы то ни было (даже самой этой функции). Функция попадет в очередь совершенно независимо от других событий (кроме уже описанных), даже если для этого придется пожертвовать свободным временем между запусками функций (т.е. если функция будет исполняться 10мс, а интервал ее запуска составит те же 10мс, то браузер будет постоянно загружен запусками такой функции). Наконец, после второго вызова «интервальной» функции, как мы видим, в очереди JavaScript-движка не останется никаких обработчиков к выполнению. Это означает, что браузер сейчас будет ждать следующего асинхронного события. Мы достигли этого на отметке в 50мс, когда произошел очередной запуск функции по временному интервалу, однако, сейчас ничего не мешает этому запуску, и он будет произведен немедленно. Есть ли разница?Итак, давайте рассмотрим пример, чтобы глубже понять различия между setTimeout(function(){ /* Какой-то большой участок кода... */ setTimeout(arguments.callee, 10); }, 10); setInterval(function(){ /* Какой-то большой участок кода... */ }, 10); Эти два участка кода, на первый взгляд, выглядят идентичными, однако, это не так. Стоит заметить, что в случае выполнение кода с ВыводыМы много чего узнали из этих примеров, давайте соберем это вместе:
Теперь мои пять копеек. На данный момент важными мне кажутся два вывода. Первое, если вы планируете регулярно совершать какое-то действие (например, опрашивать сервер), лучше всего это будет производить через ЗаключениеСуммируя все вышеперечисленное, можно с уверенностью заявить, что факты, выявленные относительно выполнения асинхронных событий в JavaScript, могут оказаться чрезвычайно полезными при разработке сложных приложений, особенно тех, в которых происходит много разнообразных событий. Источник:
webo.in
Зверніть увагу на додаткові посиланняЯкщо вас цікавить...Головний розділзагрузка...
|
Теми розділу
Сторінки, близькі за змістом
|
Copyright © 2008—2024 Портал Знань.
При використанні матеріалів посилання, для інтернет-ресурсів — гіперпосилання, на Znannya.org обов'язкове.
Зв'язок
|
НТУУ "КПІ" Інженерія програмного забезпечення КПІ Лабораторія СЕТ |
|