How to write a debounce function | Writing our debounce function in JavaScript
Вставка
- Опубліковано 16 тра 2020
- Привет! В этом видео мы подробно рассмотрим функцию debounce: что это, когда она нужна, и с нуля напишем её код.
Один из примеров использования функции debounce - это сократить количество внешних http запросов при наборе текста пользователем в форме поиска.
А еще на собеседованиях можно часто услышать задание - написать свою функцию debounce. Приступим!
Код из видео: codepen.io/puzankov/pen/JjYmeqV
---
Если видео было для вас полезным, ставьте лайк и поделитесь им с друзьями.
Подписывайтесь на наш канал: bit.ly/fs-ytb
---
Присоединяйтесь к нам в соцсетях:
FB: / frontendscience
Instagram Сергея Пузанкова: / puzankovcom
Заходите на наш сайт: frontend-science.com/
--
Song: Atch - Your Love
Music provided by Vlog No Copyright Music.
Creative Commons - Attribution-ShareAlike 3.0 Unported
Video Link: • Atch - Your Love (Vlog...
#debounce, #javascript, #frontend
![Lp. Последняя Реальность #107 РОДНОЙ ДОМ [Финал] • Майнкрафт](http://i.ytimg.com/vi/IK3QKzKUlHM/mqdefault.jpg)
Отличное видео и качество на очень высоком уровне!Про event emitter было бы неплохо тоже после trottling)
Посмотрел 3 видео, здесь лучшее объяснение. Спасибо
Привет!
Классный контент!
Однозначно лайк!
Спасибо за поддержку! Очень вдохновляет!
Супер. Действительно очень нужная и важная тема. Спасибо большое)
Благодарю! Заказывайте новые видео
Нравится подача материала - круто, понятно. Спасибо!
После теории иногда "руки опускаются", но благодаря Вам - двигаемся дальше!
После того как ты сказал, что впереди ещё одна прикольная функция throttle.... я принял решение создать на ютубчике отдельный плей-лист по JS... Память - штука коварная! Так что лучше буду начинать сохранять подобного рода контент!
Спасибо, что передаёшь свой опыт для будущих инженеров! Спасибо огромное!
Благодарю за комментарий! Очень приятно! И очень рад, что видео оказалось полезным и интересным!
@@frontendscience Пришла идейка. Может запишешь подобного формата видео про Observers? Их там несколько вроде разных. Мне кажется в тему будет)
многие примеры не помогали, а вы меня выручили, большое спасибо)
Поддержу, спасибо! Правда, это ещё рано для меня)
Благодарю! Ваша поддержка очень ценна!
Пуууушка!! Премного благодарен! 🔥🚀🌠
очень качественный контент и канал в целом, хочется пожелать больше просмотров!)
Благодарим Вас за добрые слова и поддержку! Очень вдохновляет:)
Благодарю за видео, помогло очень.
Отличное видео, спасибо!
Не хватает только чуть более подробного объяснения момента с apply. Понятно, как apply работает сам по себе, но именно в данной обертке не приходит в голову пример, как должна выглядеть конструкция (какая или как должна вызываться функция или с какими параметрами), чтобы без apply было худо. То есть на словах-то понятно, что потеряется контекст, this укажет не на то, все умрут и некому будет кормить грустных котят, но как именно это произойдет - не оч понятно.
С другой стороны, это уже другая тема, но просто строчка-другая кода в качестве примера и слова "в этом случае без apply будет плохо" (без подробного объяснения) - этого было бы достаточно.
С третьей стороны, я сейчас пойду в консоль придумывать такие ситуации, что тоже полезно)
Сергей, ну это прям максимально полезно! Однозначно подписка
Благодарю за поддержку! Вдохновляет )
Возьму на заметку) спасибо
привет, ты прям лучший! очень хорошее объяснение и отличная подача. Спасибо!!!
Рад, что понравилось! Спасибо, что смотришь
Хорошее объяснение, спасибо
Спасибо за полезный контент
круто, спасибо! Максимально подробно все рассказано)
Спасибо за обратную связь. Рад, что оказалось полезно!
нашёл для себя новый канал ))
мне понравилось как рассказываешь.
чем подробней , тем лучше !
Рад, что понравилось!
Ты крутой бро, Спасибо тебе огромное, продолжай в том же духе, ты делаешь мир лучше. Твои видео дофига полезные
Спасибо большое за поддержку! Очень вдохновляет!
Спасибо!
Хорошее видео!
Привет, спасибо за видео. Реализуете кейс с отменой проммиса?
Полезная обертка при ресайзинге. Так же, как вариант, можно делать их на кнопки отправки данных, что бы клиент не щелкал сразу несколько раз. Использовал debounce, когда делал квиз-проект.
Отличные примеры!
для того, чтоб клиент не щелкал много раз нужно делать кнопку неактивной, пока ждем результат. Показывать какой-то лоадер. А при получении результата или ошибки уже показывать результат или ошибку.
Достаточно много разных способов существует. Debounce, как один из них.
очень доходчиво, мерси
пушка. Спасибо )
Спасибо, очень полезное видео и хорошо объяснили!)
И Вам спасибо, что смотрите! Заказывайте новые видео ;)
Огромное спасибо за подробный пример! =)
И Вам спасибо, что смотрите и комментируете :)
Спасибо за видео, понятнее стало как эта функция работает)
Благодарю! Рад, что было полезно!
Вау.... просто, вау! Спасибо!
🎉🎉🎉
Крутое объяснение! Я бы хотел такое же о функции requestAnimationFrame, пожалуйста!?
Записали в список пожеланий!
Отличный урок - простой и понятный
Рады, что понравилось!
Третий раз пересматриваю, но вроде понял наконец-то 😅
жиза)
Спасибо, мне сегодня она попалась в собесе
Огромное спасибо за ваш труд! Было бы замечательно, если бы вы записали видос с наглядными примерами про промисы. О них тоже часто спрашивают на собесах.
Хорошая идея! Благодарю!
Взял на вооружение)
🔥🔥🔥
спасибо от души
И Вам, что смотрите!
Після троттла було б непогано побачити відео про clickOutside. Поширений випадок - це закрити дропдаун, якщо клікнути на будь-який елемент за його межами.
Топ годнота
Очень хорошее и понятное видео. А нет отдельно видео про врапперы, чтобы лучше понимать, почему именно надо передавать this в таких случаях?
Пока нет такого видео. Но спасибо за идею, сниму!
А различается задержка в десктопной и мобильной версии?? На моб. то медленней набор. Видео - Супер! Подписался на канал. )))
Отличный вопрос. На мобильном набор действительно медленней. + ко всему на мобильном более критично количество запросов которое отправляется. Конкретных числе по задержке у меня нет. 200мс которые я показывал в примере - это число котороя я для себя вывел экспериментальным путем. Я просто пробовал ставить разные задержки и печатал текст и смотрел как ведет себя форма при различной скорости печати и задержки. 200-250 милисекунд достаточно для того чтобы не отправлять слишком много запросов если человек печатает быстро и в тоже время это не большая задержка (которую пользователь почти не замечает) после того как он завершил печатать и перед отправкой запроса. Думаю надо также опытным путем попробовать вывести такую задержку для мобильного.
С другой стороны сейчас и интернет быстрее и сервера мощнее и уже не так супер критично если мы вдруг отправим несколько "лишних" запросов на сервер. Просто для пользователя интерфейс выйдет более "отзывчивый" (на каждое нажатие у него видны изменения интерфейса)
спасибо пол дня сидел сам пытался это сделать
Рад, что оказалось полезно!
Отличное видео, открыл для себя новый канал (подписка)
Есть вопрос: в либах типа андрэскора, в debounce есть такой параметр immediate, что он дает?
Рад, что понравилось! Immediate (принимает true/false) позволяет вызывать колбек на "переднем" крае задержки или в конце. Стоит ли вызывать колбек сразу - а потом ждать или вначале ждем потом вызываем (как в случае с этим видео). В качестве примера официальная документация приводит случай - если есть кнопка сабмит - и вначале хочется засабмитить форму, а потом сделать таймаут, чтобы не обрабатывать случайные двойные нажатия.
"нам колбаса нужна" )))
Ну вот, подсунулось видео, спать пора, но теперь придется до утра разбираться как это работает, напридумывают же всякого, апплаи какие-то, одни функции просто записаны, другие через знак равно, какой-то this в аргументе. Но за видео спасибо конечно, звучит очень полезно.
Так ты поспал вообще?)
@@frontendscience 3 дня ушло чтоб разобраться!
@@antonarbus круто! Здорово что разобрался!
Расскажите пожалуйста про работу с ветками, при помощи рекурсии (Связный список (Linked Lists))
Полезная тема. Сделаем.
топ
виде попало в рекомендованные к Iggy Azalea - Mo Bounce (Official Music Video)
:)
почему fn.apply если имеем стрелочную функцию ? пожалуйста пример
Хороший вопрос! :) Все дело в том, что наша функция которую мы вызываем, никак не использует контекст this. Поэтому формально он даже не используется. Мы можем написать fn.apply(null, arguments) и все будет и дальше работать. Нам важно вызывать нашу исходную функцию и передавать в него актуальные аргументы. А this в ней не используется.
=))) это был декоратор!
Да, debounce это функция декоратор :)
Очень познавательно, спасибо! Однако я одного не понял: если мы вызываем функцию debounce на каждый keyup, то почему у нас переменная timeout не перезаписывается каждый раз на undefined?
На keyUp у нас вызывается не debounce, а onChange. Функция debounce у нас вызывается только один раз и во время этого единственного вызова она возвращает новую (отдебаунсенную) функцию, которая и перезаписывается в onChange.
У меня скорее вопрос, насколько это норм практика - так перезаписывать функцию (onChange). То есть не в новую константу, а прямо в старую, по сути теряя доступ к начальной неотдебаунсенной функции (но это не точно)
Функция debounce от chat gpt
В данном случае эта функция мне нужна в связке с mutationObserver, чтобы срабатывало с некоторой задержкой, чтобы внутренние блоки кода по логике не отрабатывали слишком часто и только по определённому условию, чтобы не было ложных срабатываний на частые и слишком быстрые изменения DOM элементов. Для примера список ников пользователей в чате.
// Define a debounce function to limit the rate at which the mutation observer callback is called
const debounce = (func, delay) => {
let timeoutId;
return (...args) => {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func.apply(this, args);
}, delay);
};
};
То ли ты крутой, то ли ChatGPT... Но меня реально вытащил твой коммент. В варианте автора видео контекст всегда выходил Window.
а гпт не в курсе что при стрелке контекст теряется?
@@InsaneAnger он не теряется, он просто внешний
Так вот что это значит в rxjs (reative x)
привет, а что с курсами? Front-end science ждет перезагрузка?
Обязательно! На англоязычный поток пойдешь?
@@frontendscience если вести лично вы будете то да)
идея интересная, но вот как мне не нравится что можно а
взять и переопределить функцию, вот не заметишь ты эту строчку с присваиванием и будешь искать ошибку не там...
fn.apply(this, arguments) --- this - это контекст текущей функции(debounce) или onChange ( сам input)?
Смотри, функция debaunce при вызове вернет новую функцию которую мы перезапишем в переменную onChange. Получается в fn.apply(this, arguments) this - это это контекст теперь именно onChange.
@@frontendscience Cпасибо Вам большое за ответ и за отличный контент )
@@frontendscience а почему нельзя было обойтись простым вызовом функции?
В fn.apply(this, arguments) arguments ключевое слово?
Да - arguments, возвращает лист аргументов функции
В каком редакторе кода вы пишете?
WebStorm
Я думал что классический дебаунс это когда функция сразу вызывается первый раз, а потом просто вызов не произойдет если попытаемся вызвать еще раз слишком быстро
зачем ты используешь apply? какой кейс покрывает?
для того чтобы закинуть в функцию которая приходит в debounce аргументы;
тело функции на 4 строке, можно прописать и иначе. { fn(...arguments) } - смысл и результат будет тот же.
то есть, когда сработает функция fnCall , она вызовет fn и передаст в нее аргументы которые придут с функцией fn.
но ведь debounce возвращает функцию , так ее ж запустить надо , а где запуск происходит ? -этот момент не понятен
в 14й строке мы переопределили onChange - теперь ей мы присвоили функцию которую debounce вернул. В 16й строке у нас навешен обработчик события. Он то и вызывает нашу функцию постоянно, когда происходит событие keyup
Добрый день, подскажите пожалуйста что мне нужно знать что бы выполнить следующую задачу: я хочу сделать таблицу с формулами на сайте, чтобы при внесении в ячейку значений в диапазоне от 0 до 50, в другой ячейки выводилось значение 1, а если диапазон от 50 до 100 то в другой ячейки выводится значение 2 и т.д.
Какой язык программирования мне поможет это реализовать и какими библиотеками можно воспользоваться?
Ну если это все задача то это очень отлично реализуемо на обычном js. Без каких либо библиотек.
@@frontendscience спасибо
Это выглядит как матрешка) Зато поняла, зачем замыкания!
можете объяснить, а зачем усложнять и писать 11 строчку еще и с применением контекста this в стрелочной функции? Спасибо
function debounce(callback, delay) {
let timer = null;
return function (...args) {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
callback(...args);
}, delay);
};
}
А зачем усложнять и присваивать null к timer? А затем ещё проверку делать? Если закинуть в clearInterval undefined разве будет ругаться?)
потеря контекста?
@@vppisya если писать с typescript
Всё круто, но зачем усложнять биндингом контекста?
Потому что в функции, которую мы дебаунсим, может использоваться контекст.
@@frontendscience Спасибо за ответ
кто нибудь пробовал набрать колбасу за 200мс? ))
🤣
Кривая функция, не совсем правильная