Throttle-debounce
Реализует две возможности с помощью которых можно задавать характер выполнения указанных функций — максимальную частоту их выполнения и задержку выполнения после вызова.
$.throttle(delay, [no_trailing], callback):function
По заданной функции callback создает другую, идентичную функцию. Однако последняя будет ограничена в частоте выполнения — не чаще, чем один раз в delay миллисекунд. Если с момента последнего вызова прошло меньшее времени и был произведен еще один, то он будет проигнорирован.
no_trailing — необязательный параметр типа boolean. По умолчанию равен false. Назначение этого параметра легче проиллюстрировать. Допустим, функция созданная с помощью $.throttle() вызывается пять раз в секунду, при delay равном одной секунде. Изобразим вызовы функции столбиками (|), а ее действительное выполнение крестиками (Х):
1) no_trailing = false
||||||||||||||||||||||||| (пауза) |||||||||||||||||||||||||
X X X X X X X X X X X X
2) no_trailing = true
||||||||||||||||||||||||| (пауза) |||||||||||||||||||||||||
X X X X X X X X X X
То есть, при выключенном
no_trailing, последний проигнорированный вызов функции все же будет выполнен, по окончанию времени задержки.
$.debounce(delay,[at_begin],callback):function
По заданной функции callback создает другую, идентичную функцию. Однако выполнение последней будет откладываться на delay миллисекунд, если за это время функция будет вызвана еще раз, то предыдущий вызов будет отменен, а выполнение текущего опять отложится на время delay. И т. д.
at_begin — необязательный параметр типа boolean. По умолчанию равен false. Назначение этого параметра легче проиллюстрировать. Допустим, функция созданная с помощью $.debounce() вызывается пять раз в секунду, при delay равном одной секунде. Изобразим вызовы функции столбиками (|), а ее действительное выполнение крестиками (Х):
1) at_begin = false
||||||||||||||||||||||||| (пауза) |||||||||||||||||||||||||
X X
2) at_begin = true
||||||||||||||||||||||||| (пауза) |||||||||||||||||||||||||
X X
То есть, при выключенном
at_begin, каждый вызов функции откладывает выполнение на
delay миллисекунд с момента последнего вызова, а при включенном, первое выполнение происходит сразу же, а следующие вызовы увеличивают временной промежуток НЕвыполнения.
Функция $.throttle() может быть очень полезна при создании обработчиков часто происходящих событий. Например движения мыши или прокрутки страницы (скроллинга). Такие события могут происходит по нескольку десятков раз в секунду, и обработка каждого вызова может привести к «подвисаниям» страницы. Обычно, обрабатывать каждое возникающее событие не обязательно и достаточно ограничиться 1-10 вызовами в секунду. В этом случае $.throttle() может быть очень полезна, поскольку она может «прорядить» частые вызовы обработчиков:
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
~lt~script src="/plagins/throttle-debounce/jquery.ba-throttle-debounce.min.js"~gt~~lt~/script~gt~
~lt~style~gt~
.box{width:300px; height:200px; margin:30px auto; background-color:red}
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~div class="box"~gt~~lt~/div~gt~
~lt~p class="reports"~gt~
Вызовов события mousemove без использования throttle: ~lt~span id="mousemoveNum1"~gt~0~lt~/span~gt~~lt~br~gt~
Вызовов события mousemove с использованием throttle: ~lt~span id="mousemoveNum2"~gt~0~lt~/span~gt~~lt~br~gt~
~lt~/p~gt~
~lt~script~gt~
var f = function(e){
// найдем элемент с количеством вызовов
var $numEl = $('#'+e.data.sourceId);
// увеличим значение на единицу
$numEl.text($numEl.text()-0+1);
}
// установим обработчики
$('.box')
.mousemove({sourceId:'mousemoveNum1'}, f)
.mousemove({sourceId:'mousemoveNum2'}, $.throttle(200, f));
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
Для большинства случаев, в качестве delay подойдут значения от 100 (10 раз в секунду) до 250 (4 раза в секунду).
Функцию $.debounce() удобно использовать, например при реализации выпадающих подсказок поиска (которые реализованы в большинстве поисковых систем). Не обязательно запускать поиск на каждый введенный символ. Пока пользователь уверенно вводи запрос можно подождать, а уже когда он остановиться — совершить запрос на сервер с помощью технологии ajax. С помощью $.debounce() можно очень просто это организовать, установив обработчик с запросом, предварительно «пропустив» его через $.debounce():
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
~lt~script src="/plagins/throttle-debounce/jquery.ba-throttle-debounce.min.js"~gt~~lt~/script~gt~
~lt~style~gt~
.box{width:300px; height:200px; margin:30px auto; background-color:red}
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~input~gt~
~lt~p class="reports"~gt~
Вызовов события keyup без использования debounce: ~lt~span id="mousemoveNum1"~gt~0~lt~/span~gt~~lt~br~gt~
Вызовов события keyup с использованием debounce: ~lt~span id="mousemoveNum2"~gt~0~lt~/span~gt~~lt~br~gt~
~lt~/p~gt~
~lt~script~gt~
var f = function(e){
// найдем элемент с количеством вызовов
var $numEl = $('#'+e.data.sourceId);
// увеличим значение на единицу
$numEl.text($numEl.text()-0+1);
}
// установим обработчики
$('input')
.keyup({sourceId:'mousemoveNum1'}, f)
.keyup({sourceId:'mousemoveNum2'}, $.debounce(500, f));
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
Установленное время ожидание здесь 500 мс (пол секунды). То есть если пользователь вводил строку, а затем в течении половины секунды не вводил новых символов, то можно считать, что ему следует предложить возможные варианты.
Подключение
Чтобы плагин стал доступен на странице необходимо подключить файл с библиотекой jQuery, а так же js-файл плагина: (его можно скачать на github):
~lt~script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
~lt~script type="text/javascript" src="jquery.ba-throttle-debounce.min.js"~gt~~lt~/script~gt~
Информация
- Размер плагина ~1k (сжатый js-файл)
- Официальная страница
- Кроссбраузерный (работает во всех современных браузерах)