Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 28
очень полезно. спасибо
Актуальная информация:
данные методы находятся в реализации JS библиотеки ladsh
https://lodash.com/docs/4.17.4#debounce
данные методы находятся в реализации JS библиотеки ladsh
https://lodash.com/docs/4.17.4#debounce
Для задания контекста используется https://lodash.com/docs/4.17.4#bind
Спасибо. Полезные сведения и примеры отличные.
Круто, код становится прекрасным — обожаю JS :)
Идеи хорошие, паттерны — они такие, воздушные, казалось бы очевидные ;)
Но вот можно было сделать реализацию на чистом js. Без этого пустовато.
Но вот можно было сделать реализацию на чистом js. Без этого пустовато.
Вероятно, было бы удобней реализовать в виде $(selector). debounceBind(type, data, fn), и в data подавать параметр задержки.
Кстати, код можно оформить и по jsDoc.
Не удалось адекватно повесить биндер на $.ajax.success, правда, задача не совсем жизненная: )
В целом реализация хорошая. Спасибо.
Кстати, код можно оформить и по jsDoc.
Не удалось адекватно повесить биндер на $.ajax.success, правда, задача не совсем жизненная: )
В целом реализация хорошая. Спасибо.
debounce и bind могут применяться не только для обработчиков событий, поэтому делать debounceBind было бы странным. debounceBind может быть надстройкой над debounce.
А что у вас именно не получилось с $.ajax.success?
А что у вас именно не получилось с $.ajax.success?
Ну если нас интересует отслеживание выполнения функции в определенный период времени, то здесь имеет место быть контекст событийности.
Не получилось реализовать чтото вроде:
var onload = function(_e) {
console.log('loaded');
};
var test = function() {
$.ajax({
'url': 'http://myhost/blablabla',
'success': $.debounce(onload, 1000)
})
}
Если повесить test() на onClick кнопки, то функция будет выполняться каждый раз с этой задержкой, без фильтрации. Пример возник из невнятной идеи: запрос отправляется постоянно по событию а апдейт dom например происходит не чаще чем какойто интервал времени.
Не получилось реализовать чтото вроде:
var onload = function(_e) {
console.log('loaded');
};
var test = function() {
$.ajax({
'url': 'http://myhost/blablabla',
'success': $.debounce(onload, 1000)
})
}
Если повесить test() на onClick кнопки, то функция будет выполняться каждый раз с этой задержкой, без фильтрации. Пример возник из невнятной идеи: запрос отправляется постоянно по событию а апдейт dom например происходит не чаще чем какойто интервал времени.
Потому что на каждый клик у вас создается новый экземпляр задекорированной функции. Надо сделать так:
var onload = $.debounce(function(_e) {
console.log('loaded');
}, 1000);
var test = function() {
$.ajax({
'url': 'http://myhost/blablabla',
'success': onload
})
};
* This source code was highlighted with Source Code Highlighter.
Примеры хорошие, но было бы интересней иметь библиотеку манипуляции функциями — функции before/after, кэширование (которое зачем-то назвали debounce), может что-то ещё кому в голову придёт?
Может, стоит перенести в блог jQuery? Когда я начал читать, удивился, подумав что это реализовано в
джаваскрипте по умолчанию, только ближе к концу стало очевидно, что это реализовано в виде плагина к jQuery.
За статью спасибо, пригодиться в новом проекте.
джаваскрипте по умолчанию, только ближе к концу стало очевидно, что это реализовано в виде плагина к jQuery.
За статью спасибо, пригодиться в новом проекте.
Мой вариант debouncing: habrahabr.ru/blogs/webdev/17884/ (не знал тогда, что это так называется :)
Поздравляю, вы только что переизобрели несколько комбинаторов из Flapjax (flapjax-lang.org):
— blindE (аналог debounce)
— calmE (аналог throttle)
Только вот Flapjax основан на мощной теоретической базе, и реализация довольно продвинутая.
— blindE (аналог debounce)
— calmE (аналог throttle)
Только вот Flapjax основан на мощной теоретической базе, и реализация довольно продвинутая.
Автор ничего не изобретал, он же пишет: «Навеяно книжкой Николаса Закаса».
А реализация модуля по мотивам удобного паттерна в различных библиотеках — только плюс разработчикам.
А реализация модуля по мотивам удобного паттерна в различных библиотеках — только плюс разработчикам.
Я ничего не изобретал, я сделал свою жизнь, с точки зрения веб-разработчика немного проще и написал об этом. Если у вас мощная теоретическая база для этого — написали бы, я бы с удовольствием почитал.
отлично. полезно… декораторы за частую развязывают руки…
спасибо, вы мне много времени сэкономили
Поддерживаю. Статье пять лет, а актуальность сохраняется. Столкнулся с описанной задачей, а ничего более свежего и доступного не нашел.
Под впечатлением от сабжа, сделал свою версию: github.com/lolmaus/jquery.timer-tools
Отличия от сабжа:
— Изменен порядок аргументов. Колбэк теперь идет последним, что гораздо удобнее (см. примеры).
— Добавлена функция delay — алиас для setTimeout с измененным порядком аргументов.
— Debounce с исполнением колбэка в начале или в конце серии вызовов разделен на две отдельные функции.
— Код throttle упрощен. Автор сабжа там перемудрил.
— Плагин досутпен через Bower.
Под впечатлением от сабжа, сделал свою версию: github.com/lolmaus/jquery.timer-tools
Отличия от сабжа:
— Изменен порядок аргументов. Колбэк теперь идет последним, что гораздо удобнее (см. примеры).
— Добавлена функция delay — алиас для setTimeout с измененным порядком аргументов.
— Debounce с исполнением колбэка в начале или в конце серии вызовов разделен на две отдельные функции.
— Код throttle упрощен. Автор сабжа там перемудрил.
— Плагин досутпен через Bower.
Написал несколько примеров на простом JS, если кому-то надо то вот
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Микропаттерны оптимизации в Javascript: декораторы функций debouncing и throttling