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

Поділитися
Вставка
  • Опубліковано 22 гру 2024

КОМЕНТАРІ •

  • @kri4evskiy
    @kri4evskiy 4 роки тому +4

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

    • @frontendscience
      @frontendscience  4 роки тому +1

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

    • @kri4evskiy
      @kri4evskiy 4 роки тому

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

  • @moguha
    @moguha 19 днів тому

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

  • @aleksandrmatyka3118
    @aleksandrmatyka3118 4 роки тому +7

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

  • @demetrio_dede
    @demetrio_dede 4 роки тому +3

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

    • @smashno
      @smashno 4 роки тому

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

  • @aleksandr0472
    @aleksandr0472 4 роки тому +7

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

  • @justyug
    @justyug 2 роки тому +3

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

  • @klimusha1501
    @klimusha1501 3 роки тому +5

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

    • @frontendscience
      @frontendscience  3 роки тому

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

  • @olgapilyugina5905
    @olgapilyugina5905 2 роки тому +3

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

  • @enfllome8830
    @enfllome8830 3 роки тому +3

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

    • @frontendscience
      @frontendscience  3 роки тому +1

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

  • @andygr1n1
    @andygr1n1 4 роки тому +3

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

    • @frontendscience
      @frontendscience  4 роки тому

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

  • @artempavlenko5147
    @artempavlenko5147 4 роки тому +2

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

  • @АртурШогенов-ч8ы
    @АртурШогенов-ч8ы 3 роки тому +3

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

    • @frontendscience
      @frontendscience  3 роки тому

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

  • @andreyzhukov2821
    @andreyzhukov2821 4 роки тому +3

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

    • @smashno
      @smashno 4 роки тому

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

  • @vadavur
    @vadavur 2 роки тому +4

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

  • @ВейсалТаштанов
    @ВейсалТаштанов 4 роки тому +2

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

    • @frontendscience
      @frontendscience  4 роки тому

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

    • @olduniverse9270
      @olduniverse9270 4 роки тому +1

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

    • @ВейсалТаштанов
      @ВейсалТаштанов 4 роки тому

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

  • @dmitrykorovin4356
    @dmitrykorovin4356 3 роки тому +3

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

    • @frontendscience
      @frontendscience  3 роки тому

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

  • @АлександрЯремко-е2у

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

    • @frontendscience
      @frontendscience  3 роки тому +1

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

  • @DereckRocker
    @DereckRocker 4 роки тому +2

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

    • @frontendscience
      @frontendscience  4 роки тому

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

  • @dmitry311212
    @dmitry311212 3 роки тому +2

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

    • @frontendscience
      @frontendscience  3 роки тому +1

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

  • @anatolykobzisty9827
    @anatolykobzisty9827 4 роки тому +4

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

    • @frontendscience
      @frontendscience  4 роки тому

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

  • @Alocvetic
    @Alocvetic 2 роки тому

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

  • @SchnippSchnappShnappi
    @SchnippSchnappShnappi 8 місяців тому +2

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

  • @gazdhikhartumov1159
    @gazdhikhartumov1159 4 роки тому +1

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

  • @SovMan
    @SovMan 4 роки тому +3

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

    • @smashno
      @smashno 4 роки тому

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

  • @МаксимКоновалов-р8т

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

    • @frontendscience
      @frontendscience  4 роки тому

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

  • @kri4evskiy
    @kri4evskiy 4 роки тому +2

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

  • @xeviltimxy
    @xeviltimxy 3 роки тому +2

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

    • @frontendscience
      @frontendscience  3 роки тому +1

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

  • @Albert_Hall
    @Albert_Hall 2 роки тому +1

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

  • @nnnabbot
    @nnnabbot Рік тому +5

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

    • @BROnik
      @BROnik Рік тому +1

      жиза)

  • @ОлегНевгад-х7л
    @ОлегНевгад-х7л 4 роки тому +1

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

  • @vl_rotche
    @vl_rotche 4 роки тому +3

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

    • @smashno
      @smashno 4 роки тому +2

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

  • @thegulpofenglish4131
    @thegulpofenglish4131 3 роки тому +1

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

  • @plajboi3608
    @plajboi3608 4 роки тому +2

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

    • @frontendscience
      @frontendscience  4 роки тому +1

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

  • @radiakendal5769
    @radiakendal5769 9 місяців тому

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

  • @vladkolesnik2274
    @vladkolesnik2274 4 роки тому +1

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

    • @frontendscience
      @frontendscience  4 роки тому

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

    • @vladkolesnik2274
      @vladkolesnik2274 4 роки тому

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

  • @IhorKevin
    @IhorKevin 4 роки тому +3

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

  • @InnaKasyan-f8h
    @InnaKasyan-f8h 2 роки тому +2

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

  • @nnnabbot
    @nnnabbot Рік тому

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

  • @olduniverse9270
    @olduniverse9270 4 роки тому +1

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

  • @TatianaMandzyuk
    @TatianaMandzyuk 4 роки тому +4

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

    • @frontendscience
      @frontendscience  4 роки тому +4

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

  • @ramilnazmiev9448
    @ramilnazmiev9448 4 роки тому +1

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

  • @admusmanov3009
    @admusmanov3009 2 роки тому

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

  • @ОлегСелин-ш9ы
    @ОлегСелин-ш9ы 4 роки тому +2

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

  • @antonarbus
    @antonarbus 3 роки тому

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

    • @frontendscience
      @frontendscience  3 роки тому +1

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

    • @antonarbus
      @antonarbus 3 роки тому

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

    • @frontendscience
      @frontendscience  3 роки тому

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

  • @evgeniylistopadskiy2839
    @evgeniylistopadskiy2839 3 роки тому

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

    • @frontendscience
      @frontendscience  3 роки тому +2

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

    • @evgeniylistopadskiy2839
      @evgeniylistopadskiy2839 3 роки тому

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

    • @TheLevius
      @TheLevius 3 роки тому

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

  • @sergeykudryashov9097
    @sergeykudryashov9097 3 роки тому +1

    Спасибо!

  • @dokinnikod1201
    @dokinnikod1201 3 роки тому +1

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

    • @frontendscience
      @frontendscience  3 роки тому +1

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

  • @MaximumAbility
    @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
      @glebdeshin1152 Рік тому

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

    • @InsaneAnger
      @InsaneAnger Рік тому

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

    • @SchnippSchnappShnappi
      @SchnippSchnappShnappi 8 місяців тому +1

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

  • @uwutheme7588
    @uwutheme7588 2 роки тому

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

    • @vadavur
      @vadavur 2 роки тому +2

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

  • @someChicoRy
    @someChicoRy Рік тому

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

  • @timchenkod88
    @timchenkod88 3 роки тому

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

  • @zigzag4967
    @zigzag4967 3 роки тому +7

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

  • @maksrygaev3900
    @maksrygaev3900 3 роки тому

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

    • @frontendscience
      @frontendscience  3 роки тому

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

  • @7kitt772
    @7kitt772 Рік тому +1

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

    • @vppisya
      @vppisya Рік тому

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

    • @terek5832
      @terek5832 Рік тому

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

    • @antonskrebetz4935
      @antonskrebetz4935 6 місяців тому

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

  • @DagestanShop
    @DagestanShop 4 роки тому +1

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

    • @frontendscience
      @frontendscience  4 роки тому +2

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

  • @cikada3398
    @cikada3398 Рік тому +1

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

    • @vlad-zf1ev
      @vlad-zf1ev Рік тому

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

  • @МаксимКоротчий

    🔥🔥🔥

  • @VelikiiYA
    @VelikiiYA 2 роки тому +1

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

  • @nurlansmile4239
    @nurlansmile4239 4 роки тому +3

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

  • @wowik1992
    @wowik1992 3 роки тому

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

    • @frontendscience
      @frontendscience  3 роки тому +1

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

    • @wowik1992
      @wowik1992 3 роки тому

      @@frontendscience спасибо

  • @jicker100
    @jicker100 4 роки тому +3

    топ

  • @Максимка-ц8г
    @Максимка-ц8г 3 роки тому

    Топ годнота

  • @romanbush5164
    @romanbush5164 2 роки тому +1

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

  • @mikaelgevorgyan4521
    @mikaelgevorgyan4521 4 роки тому +1

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

    • @frontendscience
      @frontendscience  4 роки тому

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

  • @maksimzolotoi3379
    @maksimzolotoi3379 3 роки тому

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

  • @OksanaKorobkook
    @OksanaKorobkook Рік тому

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

  • @centwor1on167
    @centwor1on167 2 роки тому

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

    • @frontendscience
      @frontendscience  2 роки тому +2

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

    • @centwor1on167
      @centwor1on167 2 роки тому

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

  • @albertrain7093
    @albertrain7093 3 роки тому

    кто нибудь пробовал набрать колбасу за 200мс? ))

  • @igork5095
    @igork5095 10 місяців тому

    Кривая функция, не совсем правильная