Очень часто приходится реализовывать выпадающее окошко, например, с подсказкой, при наведении мышки на какой-нибудь объект.

Казалось бы, что может быть проще и зачем тут вообще скрипты? Делаем окошко невидимым и просто показываем его по .

Но при таком типичном решении появляется подводный камень. Что будет, если посетитель сайта быстро проведет мышью вдоль ряда таких активных объектов? Или просто будет перемещать мышь по странице, совсем не рассчитывая на выскакивающий попап?

В обоих случаях он будет неприятно удивлен поведением сайта. Бестолковое мелькание попапов, это, наверное, не совсем то, что нам нужно.

Задача

Сделать так, чтобы всплывающее окошко появлялось не моментально, а с небольшой задержкой.

Решение

Вот тут на сцену и выходит скрипт. Я покажу решение с использованием моего любимого jQuery.

Допустим, у нас есть список изображений, а подсказки к ним заданы в тегах :

• Подпись
• Подпись

Конечно, кто-нибудь может сказать, что красивее было бы избавиться от тега-подсказки в коде и генерировать ее, например, из атрибута data-title. Да, красивее. Но наша статья вовсе не про это. Для простоты, давай оставим все, как есть.

Итак, пишем CSS. Выпадающему окошку зададим абсолютное позиционирование и скроем его с помощью : none.

Li { position: relative; } li div { position: absolute; top: 120px; left: 20px; display: none; }

Теперь нам нужен скрипт, который будет показывать и скрывать окошко. Не забудь .

Для начал покажу упрощенный вариант — без задержки. Используем событие hover. Тут все просто. При наведении мыши находим и показываем попап, при уходе мыши, скрываем его.

JQuery(document).ready(function(){ jQuery("li").hover(function () { jQuery(this).find("div").fadeIn(); }, function () { jQuery("li div").fadeOut(); }); });

Теперь давай сделаем задержку. Для этого воспользуемся замечательной js-функцией setTimeout.

JQuery(document).ready(function(){ var intervalID; jQuery("li").hover(function () { var popup = jQuery(this).find("div"); intervalID=setTimeout(function() { popup.fadeIn(); }, 500); }, function () { jQuery("li div").fadeOut(); clearInterval(intervalID); }); });

Проверено в:

• IE 6-8
• Firefox 3+
• Opera 9.5-10.5
• Safari 4
• Chrome

Немного разъяснений по js

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

Как управлять задержкой?

Задержка определяется числовым параметром функции setTimeout. Я поставил 500мс (т.е. полсекунды):

IntervalID=setTimeout(function() { popup.fadeIn(); }, 500);

Зачем нам переменная intervalID?

Все просто. Когда мы наведем мышь на картинку, то setTimeout запустит счетчик. Даже после того, как мы уйдем с картинки, счетчик сработает и попап выскочит. Для того чтобы этого не случилось, мы сбрасываем счетчик с помощью функции clearInterval. А эта функция, в свою очередь, должна получить информацию, какой именно счетчик сбросить. Эта информация как раз и хранится в intervalID.

Зачем нужен var popup?

Действительно, может показаться, что проще написать:

… jQuery("li").hover(function () { intervalID=setTimeout(function() { jQuery(this).find("div").fadeIn(); }, 500); }, …

…и выбросить лишнюю строку и переменную.

Но такая запись не сработает, потому, что внутри setTimeout конструкция jQuery(this) уже не будет указывать на элемент , на который мы навели курсор. Поэтому я предпочел найти попап заранее, до входа в счетчик и сохранить его в переменной.

Если остались еще какие-то вопросы по этому поводу — добро пожаловать в комментарии.

Почти все реализации JavaScript имеют внутренний таймер-планировщик, который позволяет задавать вызов функции через заданный период времени.

В частности, эта возможность поддерживается в браузерах и в сервере Node.JS.

setTimeout

Синтаксис:

Var timerId = setTimeout(func / code, delay[, arg1, arg2...])

Параметры:

Func/code Функция или строка кода для исполнения. Строка поддерживается для совместимости, использовать её не рекомендуется. delay Задержка в миллисекундах, 1000 миллисекунд равны 1 секунде. arg1 , arg2 … Аргументы, которые нужно передать функции. Не поддерживаются в IE9-.

Исполнение функции произойдёт спустя время, указанное в параметре delay .

Например, следующий код вызовет func() через одну секунду:

Function func() { alert("Привет"); } setTimeout(func, 1000);

С передачей аргументов (не сработает в IE9-):

Function func(phrase, who) { alert(phrase + ", " + who); } setTimeout(func, 1000, "Привет", "Вася"); // Привет, Вася

Если первый аргумент является строкой, то интерпретатор создаёт анонимную функцию из этой строки.

То есть такая запись тоже сработает:

SetTimeout("alert("Привет")", 1000);

Вместо них используйте анонимные функции, вот так:

SetTimeout(function() { alert("Привет") }, 1000);

Отмена исполнения clearTimeout

Функция setTimeout возвращает числовой идентификатор таймера timerId , который можно использовать для отмены действия.

Синтаксис:

Var timerId = setTimeout(...); clearTimeout(timerId);

В следующем примере мы ставим таймаут, а затем удаляем (передумали). В результате ничего не происходит.

Var timerId = setTimeout(function() { alert(1) }, 1000); alert(timerId); // число - идентификатор таймера clearTimeout(timerId); alert(timerId); // всё ещё число, оно не обнуляется после отмены

Как видно из alert , в браузере идентификатор таймера является обычным числом. Другие JavaScript-окружения, например Node.JS, могут возвращать объект таймера, с дополнительными методами.

Такие разночтения вполне соответствуют стандарту просто потому, что в спецификации JavaScript про таймеры нет ни слова.

Таймеры – это надстройка над JavaScript, которая описана в секции Timers стандарта HTML5 для браузеров и в документации к Node.JS – для сервера.

setInterval

Метод setInterval имеет синтаксис, аналогичный setTimeout .

Var timerId = setInterval(func / code, delay[, arg1, arg2...])

Смысл аргументов – тот же самый. Но, в отличие от setTimeout , он запускает выполнение функции не один раз, а регулярно повторяет её через указанный интервал времени. Остановить исполнение можно вызовом clearInterval(timerId) .

Следующий пример при запуске станет выводить сообщение каждые две секунды, пока не пройдёт 5 секунд:

// начать повторы с интервалом 2 сек var timerId = setInterval(function() { alert("тик"); }, 2000); // через 5 сек остановить повторы setTimeout(function() { clearInterval(timerId); alert("стоп"); }, 5000);

Модальные окна замораживают время в Chrome/Opera/Safari

Что будет, если долго не жать OK на появившемся alert ? Это зависит от браузера.

В браузерах Chrome, Opera и Safari внутренний таймер «заморожен» во время показа alert/confirm/prompt . А вот в IE и Firefox внутренний таймер продолжит идти.

Поэтому, если закрыть alert после небольшой паузы, то в Firefox/IE следующий alert будет показан сразу же (время подошло), а в Chrome/Opera/Safari – только через 2 секунды после закрытия.

Рекурсивный setTimeout

Важная альтернатива setInterval – рекурсивный setTimeout:

/** вместо: var timerId = setInterval(function() { alert("тик"); }, 2000); */ var timerId = setTimeout(function tick() { alert("тик"); timerId = setTimeout(tick, 2000); }, 2000);

В коде выше следующее выполнение планируется сразу после окончания предыдущего.

Рекурсивный setTimeout – более гибкий метод тайминга, чем setInterval , так как время до следующего выполнения можно запланировать по-разному, в зависимости от результатов текущего.

Например, у нас есть сервис, который раз в 5 секунд опрашивает сервер на предмет новых данных. В случае, если сервер перегружен, можно увеличивать интервал опроса до 10, 20, 60 секунд… А потом вернуть обратно, когда всё нормализуется.

Если у нас регулярно проходят грузящие процессор задачи, то мы можем оценивать время, потраченное на их выполнение, и планировать следующий запуск раньше или позже.

Рекурсивный setTimeout гарантирует паузу между вызовами, setInterval – нет.

Давайте сравним два кода. Первый использует setInterval:

Var i = 1; setInterval(function() { func(i); }, 100);

Второй использует рекурсивный setTimeout:

Var i = 1; setTimeout(function run() { func(i); setTimeout(run, 100); }, 100);

При setInterval внутренний таймер будет срабатывать чётко каждые 100 мс и вызывать func(i) :

Вы обратили внимание?…

Реальная пауза между вызовами func при setInterval меньше, чем указана в коде!

Это естественно, ведь время работы функции никак не учитывается, оно «съедает» часть интервала.

Возможно и такое что func оказалась сложнее, чем мы рассчитывали и выполнялась дольше, чем 100 мс.

В этом случае интерпретатор будет ждать, пока функция завершится, затем проверит таймер и, если время вызова setInterval уже подошло (или прошло), то следующий вызов произойдёт сразу же .

Если функция и выполняется дольше, чем пауза setInterval , то вызовы будут происходить вообще без перерыва.

Исключением является IE, в котором таймер «застывает» во время выполнения JavaScript.

А так будет выглядеть картинка с рекурсивным setTimeout:

При рекурсивном setTimeout задержка всегда фиксирована и равна 100 мс.

Это происходит потому, что каждый новый запуск планируется только после окончания текущего.

Управление памятью

Сборщик мусора в JavaScript не чистит функции, назначенные в таймерах, пока таймеры актуальны.

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

// Функция будет жить в памяти, пока не сработал (или не был очищен) таймер setTimeout(function() {}, 100);

• Для setTimeout – внутренняя ссылка исчезнет после исполнения функции.
• Для setInterval – ссылка исчезнет при очистке таймера.

Так как функция также тянет за собой всё замыкание, то ставшие неактуальными, но не отменённые setInterval могут приводить к излишним тратам памяти.

Минимальная задержка таймера

У браузерного таймера есть минимальная возможная задержка. Она меняется от примерно нуля до 4 мс в современных браузерах. В более старых она может быть больше и достигать 15 мс.

По стандарту , минимальная задержка составляет 4 мс. Так что нет разницы между setTimeout(..,1) и setTimeout(..,4) .

Посмотреть минимальное разрешение «вживую» можно на следующем примере.

В примере ниже каждая полоска удлиняется вызовом setInterval с указанной на ней задержкой – от 0 мс (сверху) до 20 мс (внизу).

Позапускайте его в различных браузерах. Вы заметите, что несколько первых полосок анимируются с одинаковой скоростью. Это как раз потому, что слишком маленькие задержки таймер не различает.

Важно:

В Internet Explorer, нулевая задержка setInterval(.., 0) не сработает. Это касается именно setInterval , т.е. setTimeout(.., 0) работает нормально.

Откуда взялись эти 4 мс?

Почему минимальная задержка – 4 мс, а не 1 мс? Зачем она вообще существует?

Это – «привет» от прошлого. Браузер Chrome как-то пытался убрать минимальную задержку в своих ранних версиях, но оказалось, что существуют сайты, которые используют setTimeout(..,0) рекурсивно, создавая тем самым «асинхронный цикл». И, если задержку совсем убрать, то будет 100% загрузка процессора, такой сайт «подвесит» браузер.

Поэтому, чтобы не ломать существующие скрипты, решили сделать задержку. По возможности, небольшую. На время создания стандарта оптимальным числом показалось 4 мс.

Реальная частота срабатывания

В ряде ситуаций таймер будет срабатывать реже, чем обычно. Задержка между вызовами setInterval(..., 4) может быть не 4 мс, а 30 мс или даже 1000 мс.

Большинство браузеров (десктопных в первую очередь) продолжают выполнять setTimeout/setInterval , даже если вкладка неактивна.

При этом ряд из них (Chrome, FF, IE10) снижают минимальную частоту таймера, до 1 раза в секунду. Получается, что в «фоновой» вкладке будет срабатывать таймер, но редко.

При работе от батареи, в ноутбуке – браузеры тоже могут снижать частоту, чтобы реже выполнять код и экономить заряд батареи. Особенно этим известен IE. Снижение может достигать нескольких раз, в зависимости от настроек.

При слишком большой загрузке процессора JavaScript может не успевать обрабатывать таймеры вовремя. При этом некоторые запуски setInterval будут пропущены.

Вывод: на частоту 4 мс стоит ориентироваться, но не стоит рассчитывать.

Посмотрим снижение частоты в действии на небольшом примере.

При клике на кнопку ниже запускается setInterval(..., 90) , который выводит список интервалов времени между 25 последними срабатываниями таймера. Запустите его. Перейдите на другую вкладку и вернитесь.

Запустить повтор с интервалом в 90 мс Остановить повтор

Если ваш браузер увеличивает таймаут при фоновом выполнении вкладки, то вы увидите увеличенные интервалы, помеченные красным .

Кроме того, вы заметите, что таймер не является идеально точным;)

Разбивка долгих скриптов

Нулевой или небольшой таймаут также используют, чтобы разорвать поток выполнения «тяжелых» скриптов.

Например, скрипт для подсветки синтаксиса должен проанализировать код, создать много цветных элементов для подсветки и добавить их в документ – на большом файле это займёт много времени, браузер может даже подвиснуть, что неприемлемо.

Для того, чтобы этого избежать, сложная задача разбивается на части, выполнение каждой части запускается через мини-интервал после предыдущей, чтобы дать браузеру время.

Например, осуществляется анализ и подсветка первых 100 строк, затем через 20 мс – следующие 100 строк и так далее. При этом можно подстраиваться под CPU посетителя: замерять время на анализ 100 строк и, если процессор хороший, то в следующий раз обработать 200 строк, а если плохой – то 50. В итоге подсветка будет работать с адекватной быстротой и без тормозов на любых текстах и компьютерах.

Итого

• Методы setInterval(func, delay) и setTimeout(func, delay) позволяют запускать func регулярно/один раз через delay миллисекунд.
• Оба метода возвращают идентификатор таймера. Его используют для остановки выполнения вызовом clearInterval/clearTimeout .
• В случаях, когда нужно гарантировать задержку между регулярными вызовами или гибко её менять, вместо setInterval используют рекурсивный setTimeout .
• Минимальная задержка по стандарту составляет 4 мс. Браузеры соблюдают этот стандарт, но некоторые другие среды для выполнения JS, например Node.JS, могут предоставить и меньше задержки.
• В реальности срабатывания таймера могут быть гораздо реже, чем назначено, например если процессор перегружен, вкладка находится в фоновом режиме, ноутбук работает от батареи или по какой-то иной причине.

Браузерных особенностей почти нет, разве что вызов setInterval(..., 0) с нулевой задержкой в IE недопустим, нужно указывать setInterval(..., 1) .

Задачи

важность: 5

Напишите функцию printNumbersInterval() , которая последовательно выводит в консоль числа от 1 до 20, с интервалом между числами 100 мс. То есть, весь вывод должен занимать 2000 мс, в течение которых каждые 100 мс в консоли появляется очередное число.

Нажмите на кнопку, открыв консоль, для демонстрации:

printNumbersInterval()

P.S. Функция должна использовать setInterval .

Решение

Function printNumbersInterval() { var i = 1; var timerId = setInterval(function() { console.log(i); if (i == 20) clearInterval(timerId); i++; }, 100); } // вызов printNumbersInterval();

важность: 5

Сделайте то же самое, что в задаче Вывод чисел каждые 100 мс , но с использованием рекурсивного setTimeout вместо setInterval .

Решение

Function printNumbersTimeout20_100() { var i = 1; var timerId = setTimeout(function go() { console.log(i); if (i < 20) setTimeout(go, 100); i++; }, 100); } // вызов printNumbersTimeout20_100();

важность: 5

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

Поэтому решаем обрабатывать не весь код сразу, что привело бы к зависанию скрипта, а разбить работу на части: подсвечивать по 20 строк раз в 10 мс.

Как мы знаем, есть два варианта реализации такой подсветки:

Через setInterval , с остановкой по окончании работы:

Timer = setInterval(function() { if (есть еще что подсветить) highlight(); else clearInterval(timer); }, 10);

Через рекурсивный setTimeout:

SetTimeout(function go() { highlight(); if (есть еще что подсветить) setTimeout(go, 10); }, 10);

Какой из них стоит использовать? Почему?

Решение

Нужно выбрать вариант 2, который гарантирует браузеру свободное время между выполнениями highlight .

Первый вариант может загрузить процессор на 100%, если highlight занимает время, близкое к 10 мс или, тем более, большее чем 10 мс, т.к. таймер не учитывает время выполнения функции.

Что интересно, в обоих случаях браузер не будет выводить предупреждение о том, что скрипт занимает много времени. Но от 100% загрузки процессора возможны притормаживания других операций. В общем, это совсем не то, что мы хотим, поэтому вариант 2.

В JavaScript есть внутренний таймер, который предоставляет возможность запускать функции через определённое время. Для этого используются функции setTimeout() или setInterval() . Они не имеют собственного объекта, а являются методами объекта window .

setTimeout()

Метод setTimeout() применяется, когда необходимо однократно запустить какую-либо функцию через заданный промежуток времени. Синтаксис setTimeout() представлен двумя формами записи на выбор.

Основная форма:

SetTimeout(функция[, задержка, аргумент1, аргумент2, ...])

Альтернативная форма:

SetTimeout(код[, задержка]) функция Имя функции, которая должна быть запущена. Функцию можно задать непосредственно при вызове setTimeout() . код Строка кода, которая будет преобразована в анонимную функцию. задержка Необязательный параметр. Время в миллисекундах, через которое должна выполниться функция. По умолчанию устанавливается 0. аргумент1, аргумент2, ... Аргументы, которые будут переданы в функцию.

В примере, приведённом ниже, представлены два вызова метода setTimeout() , которые приведут к одному результату.

SetTimeout(function() { alert("Прошла 1 секунда"); }, 1000); // или setTimeout("alert("Прошла 1 секунда")", 1000);

Альтернативная форма не рекомендуется для использования. Для этого есть много причин, но основные - это потеря производительности и возможные проблемы при минимизации кода. Эта форма существует только для совместимости со старыми скриптами.

Метод setTimeout() возвращает идентификатор таймера. Он используется для отмены таймера.

Вызов setTimeout() устанавливает задержку только для переданной функции. Всё, что следует за этим методом, продолжает выполняться без паузы во времени.

Отмена setTimeout

Для отмены действия setTimeout() используется метод clearTimeout() .

ClearTimeout(идентификатор) идентификатор Идентификатор таймера, полученный при вызове setTimeout() .

Пример использования setTimeout BOM-интерфейс Заморозить на 3 секунды var button = document.body.firstElementChild; button.onclick = function() { button.disabled = true; setTimeout(function() { /* запуск таймера */ button.disabled = false; }, 3000); };

Заморозить на 3 секунды

setInterval()

Метод setInterval() используется для многократного запуска определённой функции через заданный промежуток времени. Синтаксис этого метода полностью аналогичен .

Основная форма:

SetInterval(функция[, задержка, аргумент1, аргумент2, ...])

Альтернативная форма:

SetInterval(код[, задержка]) функция Имя функции, которая будет повторяться. Функцию можно задать непосредственно при вызове setInterval() . код Строка кода, которая будет преобразована в анонимную функцию. задержка Необязательный параметр. Время в миллисекундах, задающее интервал между запусками функции. По умолчанию устанавливается 0. аргумент1, аргумент2, ... Аргументы, которые будут переданы в функцию при каждом запуске.

Ниже приведён пример, в котором оба вызова метода setInterval() приведёт к одному результату.

SetInterval(function() { alert("Прошла 1 секунда"); }, 1000); // или setInterval("alert("Прошла 1 секунда")", 1000);

Метод setInterval() возвращает идентификатор таймера. Он используется для отмены таймера.

Вызов setInterval() устанавливает интервал только для переданной функции. Весь код, который следует за этим методом, продолжает выполняться без паузы во времени.

Отмена setInterval

Метод setInterval() будет запускать переданную функцию до тех пор, пока не будет принудительно остановлен. Для этого используется метод clearInterval() .

ClearInterval(идентификатор) идентификатор Идентификатор таймера, полученный при вызове setInterval() .

Пример использования setInterval BOM-интерфейс Заморозить на 5 секунд var button = document.body.firstElementChild; button.onclick = function() { var time = 5; button.disabled = true; button.innerHTML = "Разморозится через " + time; var interval_id = setInterval(function() { /* запуск таймера */ time--; if (time != 0) { button.innerHTML = "Разморозится через " + time; } else { clearInterval(interval_id); /* остановка таймера */ button.disabled = false; button.innerHTML = "Заморозить на 5 секунд"; } }, 1000); };

Заморозить на 5 секунд

Особенности использования таймеров Минимальная задержка ограничена

Теоретически в таймерах можно указывать нулевую задержку времени. Однако, функция всё равно будет запускаться с некоторой задержкой. В действующем стандарте минимальная задержка установлена в 4 мс. В современных браузерах она составляет от 4 до 10 мс. Это сделано для того, чтобы вызов setInterval() с нулевой задержкой не привёл к перегрузке процессора или сервера.

Максимальная задержка ограничена

Большинство браузеров хранят время задержки таймера в виде 32-битного целого числа. Это означает, что при использовании значения больше, чем 2147483647 (примерно 25 дней), произойдёт переполнение памяти и таймер запустится без задержки.

Задержка имеет погрешность

Задержка может отличаться от установленной из-за загрузки системы другими процессами. В этом можно убедиться на примере, представленном ниже. Задержка установлена 100 мс:

Задержка может ограничиваться браузером

В неактивных закладках задержка может сильно отличаться от заданной. Многие браузеры в целях экономии ресурсов для неактивных закладок устанавливают минимальную задержку в 1000 мс. Это будет видно, если при запущенном примере, приведённом выше, на несколько секунд перейти в другую вкладку.

Задержка, установленная в таймере, задаёт интервал между запусками функции. Но заданная функция всегда выполняется в течение некоторого времени. Это время никак не влияет на заданный интервал, если оно меньше интервала. Выполнение функции заканчивается раньше, чем требуется её повторный запуск.

Если время выполнения функции окажется больше, чем заданный интервал, тогда повторный запуск не будет осуществлён вовремя. Таймер будет ждать, пока функция закончит выполнение, а после этого сразу же запустит её снова (без задержки). При таком варианте фактический интервал может сильно отличаться от заданного.

Всё вышесказанное подтверждается следующим примером. Интервал таймера задан 50 мс. Время выполнения функции можно варьировать от 0 до 200 мс. Если введённое значение меньше 50, тогда интервал таймера будет соответствовать заданному (с некоторой погрешностью, про которую писалось выше). А если больше 50, тогда интервал между запусками будет равен времени выполнения функции.

Вчера немного переделывал движок моего блога, хотел ускорить загрузку сайта. Начала конечно с HTML кода, удалив лишние запросы на .js и .css файлы, объединил и сжал. Так же, решил оптимизировать изображения на сайте. Сделал 2 варианта главного изображения записи. Один в формате .JPG с ухудшенным качеством на 70%, а второй вариант в исходном качестве. К моему большому удивлению, это хорошо повлияло на загрузку сайта. Ведь исходное изображение весом в 351 Кб , сжалось до 42 Кб в формат .JPG.

Вы можете заметить, что сайт частично работает в режиме AJAX, так же и главные изображения подгружаются после загрузке самой страницы (это можно заметить, когда размытие изображения исчезает). Не скажу что скорость сайта увеличилась в over100500 раз, но разница небольшая чувствуется.

В следующей статье, я расскажу как оптимизировал сайт, а так же про отличные утилиты для сжатия файлов (CSS,JS,JPG и т.п.)

Наверное, у вас возник вопрос о том, зачем я вам рассказываю про оптимизацию? Да, дело в том, что после оптимизации изображений, я не подправил поиск сайта и следовательно изображения не подгружались и тупил сам поиск. Вотаквот...

После исправления этого бага, я заметил, что поиск работает нестабильно, а именно, при вводе одного символа, сразу отправлялся запрос на сервер. Я не учел это по своей невнимательности.

И сейчас, я расскажу вам как сделать на JavaScript выполнение функции с ожиданием. В моем случае это будет с поле .

Прежде всего установим обработчик на наше поле. Можно установить для 3 событий: onKeyUp , onKeyDown , onKeyPress , onChange и еще для других событий .

Объяснение событий:

• .onKeyUp() отпустил клавишу.
• .onKeyDown() - происходит в том случае, когда пользователь удерживает клавишу.
• .onKeyPress() - происходит в том случае, когда пользователь нажал или отпустил клавишу.
• .onChange() - происходит в том случае, когда пользователь ввел значение в поле и потерял фокус.

На все события я не буду приводить пример, только onKeyUp . У jQuery есть метод .on() , который может принимать все эти события в одно значение.

$("input").on("keyup", function(){ var $this = $(this); var $delay = 500; clearTimeout($this.data("timer")); $this.data("timer", setTimeout(function(){ $this.removeData("timer"); $.get("/search", { q: $this.val() }, function(){ alert("Поиск выполнен!"); }); }, $delay)); });

• $this - хранит ссылку на объект нашего
• $delay - время ожидания в миллисекундах. В нашем случае это полсекунды.

Перед выполнением функции, мы очищаем таймер который ранее мог быть создан. Таймер как вы можете понять не глобальный, а присвоен именно для нашего .

Далее скрипт присваивает новый таймер и выполнит ваш код, который запустится после ввода значения. В нашем случае это GET запрос на сервер, после выполнения которого, появится окно с текстом Поиск выполнен! .

Живой пример можно увидеть на данном блоге, в блоке поиска или примером ниже.