Пишем вместе throttle и debounce | Уроки JavaScript

preview_player
Показать описание
Разберём зачем нужны функции throttle и debounce, вместе реализуем и разберём различия.
🏰 Английский YouTube: @webelart_en

00:00 введение.
00:29 debounce
11:16 throttle

На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.
Рекомендации по теме
Комментарии
Автор

#webelart throttle попробуйте вызвать в строгом режиме и нет,
интересно
что-то измениться?
Подсказка
будет разный результат.
Может лучше на 40 строке сделать saveThis || saveArgs
А так, материал -- супер!

Vllad_Ko
Автор

У тебя очень классные уроки! Cпасибо за то, что ты делаешь 💞💞

Polina-rxkj
Автор

Было очень интересно!♥️ Спасибо большое за ваш труд! Больше видео по JavaScript♥️

ЮляИванова-ущ
Автор

Всем рекомендую❤️ Вы мастер объяснений🥰

quite
Автор

Спасибо за урок! Интересная тема и практичная.
Вот мне кажется в debounce в setTimeout можно коллбэк передавать без apply и this. Только саму функцию и аргументы. Может я что-то упустил?!

ondrui
Автор

Отличный контент, очень целевой, коротко и по делу.

Ramosok
Автор

короче, неплохо. Можно даже сказать, хорошо!

alexalex
Автор

Спасибо ) не знал что это так называется ) решал это несколько по другому

arsenmanasuev
Автор

Хорошее видео, был один момент, которого я не знал

romanryaboshtan
Автор

Получается debounce() обертка генерит функции, которые юзают один и тот же timer (из замыкания). Мне для каждого случая (когда нужны разные timer) создавать свою debounce() ? Хотелось бы еще разобрать метод, наподобие createDebounce(). Или я вообще не в том направлении думаю?

СтаниславЗатолокин-цц
Автор

объясните пожалуйста, почему debounce в этом примере не срабатывает:
textarea.addEventListener('input', (e) => {
debounce( () => { console.log('1'); }, 2000);
}

soldat
Автор

Спасибо, прикольный патерн debounce, буду использовать, кто плохо понимает, как это работает, изучайте колбеки и замыкание ребята)

max-ekuu
Автор

Не совсем понимаю зачем в debounce делаем callback.apply(this) если стрелочная функция и так передает контекст ?

imgod
Автор

В функции дебаунс я бы все таки сделал, чтобы первый вызов всегда вызывался, добавив булевый флаг... А дальше уже регулировал по таймингу... Но возможно это уже от типа задачи к
Как всегда уроки хорошие, понятно и приятно смотреть ..ум и красота страшная сила 💪 :)

flogger
Автор

спасибо, Елена!)
подскажите -- как Вы решаете "проблему ресайза", когда при изменении размера дисплея нужно выполнить функцию (только раз) и вернуть все обратно при изменении в другую строну? debounce замедлит, но данное решение не єлегантное. использую flag, но может есть решение лучше

lvivduncan
Автор

Почему у вас вместо 1, 4, 5 вызывается 1, 3, 5 ?

andrewananenko
Автор

Спасибо за видео!
А как правильно делать throttle, чтобы в итоге выполнялись все вызовы функций, просто не сразу, а с дилеем?
Я сделал такой вариант с использованием очереди, но, может, есть какой-то канонизированный вариант?
(Может, это вообще уже не throttle называется)




function throttle(callback, delay) {
let queueHead = {next: null, cb: null};
let queueTail = queueHead;
let isAwaiting = false;
return function(...args) {
if (isAwaiting) {
queueTail.cb = callback.bind(this, ...args);
queueTail.next = {next: null, cb: null};
queueTail = queueTail.next;
return;
}
callback(...args);
isThrottling = true;
moveQueue();

function moveQueue(){
setTimeout(() => {
if (!queueHead.cb) {
isAwaiting = false;
} else {
queueHead.cb();
queueHead = queueHead.next;
setTimeout(() => moveQueue(), delay);
}
}, delay);
};
}
}

let cat = {
meowLevel: '',
sayMeow: function(speechTone = 'calmly') {
- cat said ${speechTone}`);
this.meowLevel += '!';
},
}



let begForFood = throttle(cat.sayMeow.bind(cat), 500);



begForFood();
begForFood();
begForFood('impatiently');
begForFood('angrily');
begForFood('furiously');

vadavur