How to write a debounce function | Writing our debounce function in JavaScript

Рет қаралды 30,705

Front-end Science with Sergey Puzankov

4 жыл бұрын

Привет! В этом видео мы подробно рассмотрим функцию 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

Пікірлер: 123

@aleksandrmatyka3118 4 жыл бұрын

Отличное видео и качество на очень высоком уровне!Про event emitter было бы неплохо тоже после trottling)

@justyug Жыл бұрын

Посмотрел 3 видео, здесь лучшее объяснение. Спасибо

@olgapilyugina5905 2 жыл бұрын

Нравится подача материала - круто, понятно. Спасибо! После теории иногда "руки опускаются", но благодаря Вам - двигаемся дальше!

@kri4evskiy 3 жыл бұрын

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

@frontendscience 3 жыл бұрын

Благодарю за комментарий! Очень приятно! И очень рад, что видео оказалось полезным и интересным!

@kri4evskiy 3 жыл бұрын

@@frontendscience Пришла идейка. Может запишешь подобного формата видео про Observers? Их там несколько вроде разных. Мне кажется в тему будет)

@Alocvetic Жыл бұрын

многие примеры не помогали, а вы меня выручили, большое спасибо)

@andreyzhukov2821 4 жыл бұрын

Привет! Классный контент! Однозначно лайк!

@smashno 4 жыл бұрын

Спасибо за поддержку! Очень вдохновляет!

@demetrio_dede 4 жыл бұрын

Супер. Действительно очень нужная и важная тема. Спасибо большое)

@smashno 4 жыл бұрын

Благодарю! Заказывайте новые видео

@Albert_Hall Жыл бұрын

Пуууушка!! Премного благодарен! 🔥🚀🌠

@vadavur 2 жыл бұрын

Отличное видео, спасибо! Не хватает только чуть более подробного объяснения момента с apply. Понятно, как apply работает сам по себе, но именно в данной обертке не приходит в голову пример, как должна выглядеть конструкция (какая или как должна вызываться функция или с какими параметрами), чтобы без apply было худо. То есть на словах-то понятно, что потеряется контекст, this укажет не на то, все умрут и некому будет кормить грустных котят, но как именно это произойдет - не оч понятно. С другой стороны, это уже другая тема, но просто строчка-другая кода в качестве примера и слова "в этом случае без apply будет плохо" (без подробного объяснения) - этого было бы достаточно. С третьей стороны, я сейчас пойду в консоль придумывать такие ситуации, что тоже полезно)

@enfllome8830 3 жыл бұрын

Сергей, ну это прям максимально полезно! Однозначно подписка

@frontendscience 3 жыл бұрын

Благодарю за поддержку! Вдохновляет )

@thegulpofenglish4131 3 жыл бұрын

Возьму на заметку) спасибо

@SovMan 4 жыл бұрын

Поддержу, спасибо! Правда, это ещё рано для меня)

@smashno 4 жыл бұрын

Благодарю! Ваша поддержка очень ценна!

@nnnabbot Жыл бұрын

Благодарю за видео, помогло очень.

@radiakendal5769 4 ай бұрын

Хорошее объяснение, спасибо

@klimusha1501 2 жыл бұрын

очень качественный контент и канал в целом, хочется пожелать больше просмотров!)

@frontendscience 2 жыл бұрын

Благодарим Вас за добрые слова и поддержку! Очень вдохновляет:)

@admusmanov3009 Жыл бұрын

Спасибо за полезный контент

@user-rb5gj7ls4n 4 жыл бұрын

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

@frontendscience 4 жыл бұрын

Отличные примеры!

@olduniverse9270 4 жыл бұрын

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

@user-rb5gj7ls4n 4 жыл бұрын

Достаточно много разных способов существует. Debounce, как один из них.

@dmitrykorovin4356 3 жыл бұрын

круто, спасибо! Максимально подробно все рассказано)

@frontendscience 3 жыл бұрын

Спасибо за обратную связь. Рад, что оказалось полезно!

@aleksandr0472 4 жыл бұрын

Привет, спасибо за видео. Реализуете кейс с отменой проммиса?

@user-lq1mm2tn5v Жыл бұрын

очень доходчиво, мерси

@artempavlenko5147 3 жыл бұрын

нашёл для себя новый канал )) мне понравилось как рассказываешь. чем подробней , тем лучше !

@frontendscience 3 жыл бұрын

Рад, что понравилось!

@SchnippSchnappShnappi 3 ай бұрын

Спасибо, мне сегодня она попалась в собесе

@sergeykudryashov9097 2 жыл бұрын

Спасибо!

@olduniverse9270 4 жыл бұрын

Хорошее видео!

@someChicoRy 9 ай бұрын

пушка. Спасибо )

@andygr1n1 3 жыл бұрын

привет, ты прям лучший! очень хорошее объяснение и отличная подача. Спасибо!!!

@frontendscience 3 жыл бұрын

Рад, что понравилось! Спасибо, что смотришь

@DereckRocker 3 жыл бұрын

Огромное спасибо за подробный пример! =)

@frontendscience 3 жыл бұрын

И Вам спасибо, что смотрите и комментируете :)

@user-fw5ew5nd4f 3 жыл бұрын

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

@frontendscience 3 жыл бұрын

Спасибо большое за поддержку! Очень вдохновляет!

@user-gr3ky3zu4i 3 жыл бұрын

Спасибо за видео, понятнее стало как эта функция работает)

@frontendscience 3 жыл бұрын

Благодарю! Рад, что было полезно!

@nnnabbot Жыл бұрын

Третий раз пересматриваю, но вроде понял наконец-то 😅

@BROnik 11 ай бұрын

жиза)

@kri4evskiy 3 жыл бұрын

Вау.... просто, вау! Спасибо!

@frontendscience 3 жыл бұрын

🎉🎉🎉

@user-ok8cg3cf3b 3 жыл бұрын

Спасибо, очень полезное видео и хорошо объяснили!)

@frontendscience 3 жыл бұрын

И Вам спасибо, что смотрите! Заказывайте новые видео ;)

@dmitry311212 2 жыл бұрын

Огромное спасибо за ваш труд! Было бы замечательно, если бы вы записали видос с наглядными примерами про промисы. О них тоже часто спрашивают на собесах.

@frontendscience 2 жыл бұрын

Хорошая идея! Благодарю!

@user-md5mw1tp3e 4 жыл бұрын

Взял на вооружение)

@gazdhikhartumov1159 4 жыл бұрын

Отличный урок - простой и понятный

@frontendscience 4 жыл бұрын

Рады, что понравилось!

@anatolykobzisty9827 4 жыл бұрын

Крутое объяснение! Я бы хотел такое же о функции requestAnimationFrame, пожалуйста!?

@frontendscience 4 жыл бұрын

Записали в список пожеланий!

@user-nw5br5jg9k 2 жыл бұрын

Топ годнота

@user-kj6sy9wm3g 10 ай бұрын

🔥🔥🔥

@IhorKevin 4 жыл бұрын

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

@ramilnazmiev9448 4 жыл бұрын

спасибо от души

@frontendscience 4 жыл бұрын

И Вам, что смотрите!

@jicker100 4 жыл бұрын

топ

@xeviltimxy 3 жыл бұрын

Очень хорошее и понятное видео. А нет отдельно видео про врапперы, чтобы лучше понимать, почему именно надо передавать this в таких случаях?

@frontendscience 3 жыл бұрын

Пока нет такого видео. Но спасибо за идею, сниму!

@vl_rotche 4 жыл бұрын

А различается задержка в десктопной и мобильной версии?? На моб. то медленней набор. Видео - Супер! Подписался на канал. )))

@smashno 4 жыл бұрын

Отличный вопрос. На мобильном набор действительно медленней. + ко всему на мобильном более критично количество запросов которое отправляется. Конкретных числе по задержке у меня нет. 200мс которые я показывал в примере - это число котороя я для себя вывел экспериментальным путем. Я просто пробовал ставить разные задержки и печатал текст и смотрел как ведет себя форма при различной скорости печати и задержки. 200-250 милисекунд достаточно для того чтобы не отправлять слишком много запросов если человек печатает быстро и в тоже время это не большая задержка (которую пользователь почти не замечает) после того как он завершил печатать и перед отправкой запроса. Думаю надо также опытным путем попробовать вывести такую задержку для мобильного. С другой стороны сейчас и интернет быстрее и сервера мощнее и уже не так супер критично если мы вдруг отправим несколько "лишних" запросов на сервер. Просто для пользователя интерфейс выйдет более "отзывчивый" (на каждое нажатие у него видны изменения интерфейса)

@maksrygaev3900 3 жыл бұрын

спасибо пол дня сидел сам пытался это сделать

@frontendscience 3 жыл бұрын

Рад, что оказалось полезно!

@plajboi3608 3 жыл бұрын

Отличное видео, открыл для себя новый канал (подписка) Есть вопрос: в либах типа андрэскора, в debounce есть такой параметр immediate, что он дает?

@frontendscience 3 жыл бұрын

Рад, что понравилось! Immediate (принимает true/false) позволяет вызывать колбек на "переднем" крае задержки или в конце. Стоит ли вызывать колбек сразу - а потом ждать или вначале ждем потом вызываем (как в случае с этим видео). В качестве примера официальная документация приводит случай - если есть кнопка сабмит - и вначале хочется засабмитить форму, а потом сделать таймаут, чтобы не обрабатывать случайные двойные нажатия.

@antonarbus 3 жыл бұрын

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

@frontendscience 3 жыл бұрын

Так ты поспал вообще?)

@antonarbus 3 жыл бұрын

@@frontendscience 3 дня ушло чтоб разобраться!

@frontendscience 3 жыл бұрын

@@antonarbus круто! Здорово что разобрался!

@zigzag4967 3 жыл бұрын

виде попало в рекомендованные к Iggy Azalea - Mo Bounce (Official Music Video)

@frontendscience 3 жыл бұрын

@nurlansmile4239 3 жыл бұрын

"нам колбаса нужна" )))

@user-wq2in5wk1d 4 жыл бұрын

Расскажите пожалуйста про работу с ветками, при помощи рекурсии (Связный список (Linked Lists))

@frontendscience 4 жыл бұрын

Полезная тема. Сделаем.

@romanbush5164 Жыл бұрын

Так вот что это значит в rxjs (reative x)

@mikaelgevorgyan4521 4 жыл бұрын

=))) это был декоратор!

@frontendscience 4 жыл бұрын

Да, debounce это функция декоратор :)

@vladkolesnik2274 4 жыл бұрын

привет, а что с курсами? Front-end science ждет перезагрузка?

@frontendscience 4 жыл бұрын

Обязательно! На англоязычный поток пойдешь?

@vladkolesnik2274 3 жыл бұрын

@@frontendscience если вести лично вы будете то да)

@TatianaMandzyuk 3 жыл бұрын

почему fn.apply если имеем стрелочную функцию ? пожалуйста пример

@frontendscience 3 жыл бұрын

Хороший вопрос! :) Все дело в том, что наша функция которую мы вызываем, никак не использует контекст this. Поэтому формально он даже не используется. Мы можем написать fn.apply(null, arguments) и все будет и дальше работать. Нам важно вызывать нашу исходную функцию и передавать в него актуальные аргументы. А this в ней не используется.

@uwutheme7588 2 жыл бұрын

Очень познавательно, спасибо! Однако я одного не понял: если мы вызываем функцию debounce на каждый keyup, то почему у нас переменная timeout не перезаписывается каждый раз на undefined?

@vadavur 2 жыл бұрын

На keyUp у нас вызывается не debounce, а onChange. Функция debounce у нас вызывается только один раз и во время этого единственного вызова она возвращает новую (отдебаунсенную) функцию, которая и перезаписывается в onChange. У меня скорее вопрос, насколько это норм практика - так перезаписывать функцию (onChange). То есть не в новую константу, а прямо в старую, по сути теряя доступ к начальной неотдебаунсенной функции (но это не точно)

@VelikiiYA 2 жыл бұрын

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

@evgeniylistopadskiy2839 3 жыл бұрын

fn.apply(this, arguments) --- this - это контекст текущей функции(debounce) или onChange ( сам input)?

@frontendscience 3 жыл бұрын

Смотри, функция debaunce при вызове вернет новую функцию которую мы перезапишем в переменную onChange. Получается в fn.apply(this, arguments) this - это это контекст теперь именно onChange.

@evgeniylistopadskiy2839 3 жыл бұрын

@@frontendscience Cпасибо Вам большое за ответ и за отличный контент )

@TheLevius 2 жыл бұрын

@@frontendscience а почему нельзя было обойтись простым вызовом функции?

@MaximumAbility Жыл бұрын

Функция 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); }; };

@glebdeshin1152 Жыл бұрын

То ли ты крутой, то ли ChatGPT... Но меня реально вытащил твой коммент. В варианте автора видео контекст всегда выходил Window.

@InsaneAnger Жыл бұрын

а гпт не в курсе что при стрелке контекст теряется?

@SchnippSchnappShnappi 3 ай бұрын

@@InsaneAnger он не теряется, он просто внешний

@dokinnikod1201 2 жыл бұрын

В fn.apply(this, arguments) arguments ключевое слово?

@frontendscience 2 жыл бұрын

Да - arguments, возвращает лист аргументов функции

@maksimzolotoi3379 3 жыл бұрын

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

@timchenkod88 2 жыл бұрын

В каком редакторе кода вы пишете?

@frontendscience 2 жыл бұрын

WebStorm

@OksanaKorobkook 10 ай бұрын

Это выглядит как матрешка) Зато поняла, зачем замыкания!

@DagestanShop 3 жыл бұрын

но ведь debounce возвращает функцию , так ее ж запустить надо , а где запуск происходит ? -этот момент не понятен

@frontendscience 3 жыл бұрын

в 14й строке мы переопределили onChange - теперь ей мы присвоили функцию которую debounce вернул. В 16й строке у нас навешен обработчик события. Он то и вызывает нашу функцию постоянно, когда происходит событие keyup

@cikada3398 Жыл бұрын

зачем ты используешь apply? какой кейс покрывает?

@vlad-zf1ev 10 ай бұрын

для того чтобы закинуть в функцию которая приходит в debounce аргументы; тело функции на 4 строке, можно прописать и иначе. { fn(...arguments) } - смысл и результат будет тот же. то есть, когда сработает функция fnCall , она вызовет fn и передаст в нее аргументы которые придут с функцией fn.

@wowik1992 2 жыл бұрын

Добрый день, подскажите пожалуйста что мне нужно знать что бы выполнить следующую задачу: я хочу сделать таблицу с формулами на сайте, чтобы при внесении в ячейку значений в диапазоне от 0 до 50, в другой ячейки выводилось значение 1, а если диапазон от 50 до 100 то в другой ячейки выводится значение 2 и т.д. Какой язык программирования мне поможет это реализовать и какими библиотеками можно воспользоваться?

@frontendscience 2 жыл бұрын

Ну если это все задача то это очень отлично реализуемо на обычном js. Без каких либо библиотек.

@wowik1992 2 жыл бұрын

@@frontendscience спасибо

@centwor1on167 2 жыл бұрын

Всё круто, но зачем усложнять биндингом контекста?

@frontendscience 2 жыл бұрын

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

@centwor1on167 2 жыл бұрын

@@frontendscience Спасибо за ответ

@7kitt772 Жыл бұрын

можете объяснить, а зачем усложнять и писать 11 строчку еще и с применением контекста this в стрелочной функции? Спасибо function debounce(callback, delay) { let timer = null; return function (...args) { if (timer) { clearTimeout(timer); } timer = setTimeout(() => { callback(...args); }, delay); }; }

@vppisya Жыл бұрын

А зачем усложнять и присваивать null к timer? А затем ещё проверку делать? Если закинуть в clearInterval undefined разве будет ругаться?)

@terek5832 Жыл бұрын

потеря контекста?

@antonskrebetz4935 17 күн бұрын

@@vppisya если писать с typescript