После того как ты сказал, что впереди ещё одна прикольная функция throttle.... я принял решение создать на ютубчике отдельный плей-лист по JS... Память - штука коварная! Так что лучше буду начинать сохранять подобного рода контент! Спасибо, что передаёшь свой опыт для будущих инженеров! Спасибо огромное!
Отличное видео, спасибо! Не хватает только чуть более подробного объяснения момента с apply. Понятно, как apply работает сам по себе, но именно в данной обертке не приходит в голову пример, как должна выглядеть конструкция (какая или как должна вызываться функция или с какими параметрами), чтобы без apply было худо. То есть на словах-то понятно, что потеряется контекст, this укажет не на то, все умрут и некому будет кормить грустных котят, но как именно это произойдет - не оч понятно. С другой стороны, это уже другая тема, но просто строчка-другая кода в качестве примера и слова "в этом случае без apply будет плохо" (без подробного объяснения) - этого было бы достаточно. С третьей стороны, я сейчас пойду в консоль придумывать такие ситуации, что тоже полезно)
Полезная обертка при ресайзинге. Так же, как вариант, можно делать их на кнопки отправки данных, что бы клиент не щелкал сразу несколько раз. Использовал debounce, когда делал квиз-проект.
для того, чтоб клиент не щелкал много раз нужно делать кнопку неактивной, пока ждем результат. Показывать какой-то лоадер. А при получении результата или ошибки уже показывать результат или ошибку.
Огромное спасибо за ваш труд! Было бы замечательно, если бы вы записали видос с наглядными примерами про промисы. О них тоже часто спрашивают на собесах.
Отличный вопрос. На мобильном набор действительно медленней. + ко всему на мобильном более критично количество запросов которое отправляется. Конкретных числе по задержке у меня нет. 200мс которые я показывал в примере - это число котороя я для себя вывел экспериментальным путем. Я просто пробовал ставить разные задержки и печатал текст и смотрел как ведет себя форма при различной скорости печати и задержки. 200-250 милисекунд достаточно для того чтобы не отправлять слишком много запросов если человек печатает быстро и в тоже время это не большая задержка (которую пользователь почти не замечает) после того как он завершил печатать и перед отправкой запроса. Думаю надо также опытным путем попробовать вывести такую задержку для мобильного. С другой стороны сейчас и интернет быстрее и сервера мощнее и уже не так супер критично если мы вдруг отправим несколько "лишних" запросов на сервер. Просто для пользователя интерфейс выйдет более "отзывчивый" (на каждое нажатие у него видны изменения интерфейса)
Рад, что понравилось! Immediate (принимает true/false) позволяет вызывать колбек на "переднем" крае задержки или в конце. Стоит ли вызывать колбек сразу - а потом ждать или вначале ждем потом вызываем (как в случае с этим видео). В качестве примера официальная документация приводит случай - если есть кнопка сабмит - и вначале хочется засабмитить форму, а потом сделать таймаут, чтобы не обрабатывать случайные двойные нажатия.
Після троттла було б непогано побачити відео про clickOutside. Поширений випадок - це закрити дропдаун, якщо клікнути на будь-який елемент за його межами.
Хороший вопрос! :) Все дело в том, что наша функция которую мы вызываем, никак не использует контекст this. Поэтому формально он даже не используется. Мы можем написать fn.apply(null, arguments) и все будет и дальше работать. Нам важно вызывать нашу исходную функцию и передавать в него актуальные аргументы. А this в ней не используется.
Ну вот, подсунулось видео, спать пора, но теперь придется до утра разбираться как это работает, напридумывают же всякого, апплаи какие-то, одни функции просто записаны, другие через знак равно, какой-то this в аргументе. Но за видео спасибо конечно, звучит очень полезно.
Смотри, функция debaunce при вызове вернет новую функцию которую мы перезапишем в переменную onChange. Получается в fn.apply(this, arguments) this - это это контекст теперь именно 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); }; };
Очень познавательно, спасибо! Однако я одного не понял: если мы вызываем функцию debounce на каждый keyup, то почему у нас переменная timeout не перезаписывается каждый раз на undefined?
На keyUp у нас вызывается не debounce, а onChange. Функция debounce у нас вызывается только один раз и во время этого единственного вызова она возвращает новую (отдебаунсенную) функцию, которая и перезаписывается в onChange. У меня скорее вопрос, насколько это норм практика - так перезаписывать функцию (onChange). То есть не в новую константу, а прямо в старую, по сути теряя доступ к начальной неотдебаунсенной функции (но это не точно)
можете объяснить, а зачем усложнять и писать 11 строчку еще и с применением контекста this в стрелочной функции? Спасибо function debounce(callback, delay) { let timer = null; return function (...args) { if (timer) { clearTimeout(timer); } timer = setTimeout(() => { callback(...args); }, delay); }; }
в 14й строке мы переопределили onChange - теперь ей мы присвоили функцию которую debounce вернул. В 16й строке у нас навешен обработчик события. Он то и вызывает нашу функцию постоянно, когда происходит событие keyup
для того чтобы закинуть в функцию которая приходит в debounce аргументы; тело функции на 4 строке, можно прописать и иначе. { fn(...arguments) } - смысл и результат будет тот же. то есть, когда сработает функция fnCall , она вызовет fn и передаст в нее аргументы которые придут с функцией fn.
идея интересная, но вот как мне не нравится что можно а взять и переопределить функцию, вот не заметишь ты эту строчку с присваиванием и будешь искать ошибку не там...
Добрый день, подскажите пожалуйста что мне нужно знать что бы выполнить следующую задачу: я хочу сделать таблицу с формулами на сайте, чтобы при внесении в ячейку значений в диапазоне от 0 до 50, в другой ячейки выводилось значение 1, а если диапазон от 50 до 100 то в другой ячейки выводится значение 2 и т.д. Какой язык программирования мне поможет это реализовать и какими библиотеками можно воспользоваться?
Я думал что классический дебаунс это когда функция сразу вызывается первый раз, а потом просто вызов не произойдет если попытаемся вызвать еще раз слишком быстро
После того как ты сказал, что впереди ещё одна прикольная функция throttle.... я принял решение создать на ютубчике отдельный плей-лист по JS... Память - штука коварная! Так что лучше буду начинать сохранять подобного рода контент!
Спасибо, что передаёшь свой опыт для будущих инженеров! Спасибо огромное!
Благодарю за комментарий! Очень приятно! И очень рад, что видео оказалось полезным и интересным!
@@frontendscience Пришла идейка. Может запишешь подобного формата видео про Observers? Их там несколько вроде разных. Мне кажется в тему будет)
Поскольку видео 20 года, напишу, что сейчас актуальнее через spread аргументы доставать. Автору и всем славянам мирного неба
Отличное видео и качество на очень высоком уровне!Про event emitter было бы неплохо тоже после trottling)
Супер. Действительно очень нужная и важная тема. Спасибо большое)
Благодарю! Заказывайте новые видео
Привет, спасибо за видео. Реализуете кейс с отменой проммиса?
Посмотрел 3 видео, здесь лучшее объяснение. Спасибо
очень качественный контент и канал в целом, хочется пожелать больше просмотров!)
Благодарим Вас за добрые слова и поддержку! Очень вдохновляет:)
Нравится подача материала - круто, понятно. Спасибо!
После теории иногда "руки опускаются", но благодаря Вам - двигаемся дальше!
Сергей, ну это прям максимально полезно! Однозначно подписка
Благодарю за поддержку! Вдохновляет )
привет, ты прям лучший! очень хорошее объяснение и отличная подача. Спасибо!!!
Рад, что понравилось! Спасибо, что смотришь
нашёл для себя новый канал ))
мне понравилось как рассказываешь.
чем подробней , тем лучше !
Рад, что понравилось!
Ты крутой бро, Спасибо тебе огромное, продолжай в том же духе, ты делаешь мир лучше. Твои видео дофига полезные
Спасибо большое за поддержку! Очень вдохновляет!
Привет!
Классный контент!
Однозначно лайк!
Спасибо за поддержку! Очень вдохновляет!
Отличное видео, спасибо!
Не хватает только чуть более подробного объяснения момента с apply. Понятно, как apply работает сам по себе, но именно в данной обертке не приходит в голову пример, как должна выглядеть конструкция (какая или как должна вызываться функция или с какими параметрами), чтобы без apply было худо. То есть на словах-то понятно, что потеряется контекст, this укажет не на то, все умрут и некому будет кормить грустных котят, но как именно это произойдет - не оч понятно.
С другой стороны, это уже другая тема, но просто строчка-другая кода в качестве примера и слова "в этом случае без apply будет плохо" (без подробного объяснения) - этого было бы достаточно.
С третьей стороны, я сейчас пойду в консоль придумывать такие ситуации, что тоже полезно)
Полезная обертка при ресайзинге. Так же, как вариант, можно делать их на кнопки отправки данных, что бы клиент не щелкал сразу несколько раз. Использовал debounce, когда делал квиз-проект.
Отличные примеры!
для того, чтоб клиент не щелкал много раз нужно делать кнопку неактивной, пока ждем результат. Показывать какой-то лоадер. А при получении результата или ошибки уже показывать результат или ошибку.
Достаточно много разных способов существует. Debounce, как один из них.
круто, спасибо! Максимально подробно все рассказано)
Спасибо за обратную связь. Рад, что оказалось полезно!
Спасибо за видео, понятнее стало как эта функция работает)
Благодарю! Рад, что было полезно!
Огромное спасибо за подробный пример! =)
И Вам спасибо, что смотрите и комментируете :)
Огромное спасибо за ваш труд! Было бы замечательно, если бы вы записали видос с наглядными примерами про промисы. О них тоже часто спрашивают на собесах.
Хорошая идея! Благодарю!
Крутое объяснение! Я бы хотел такое же о функции requestAnimationFrame, пожалуйста!?
Записали в список пожеланий!
многие примеры не помогали, а вы меня выручили, большое спасибо)
Спасибо, мне сегодня она попалась в собесе
Отличный урок - простой и понятный
Рады, что понравилось!
Поддержу, спасибо! Правда, это ещё рано для меня)
Благодарю! Ваша поддержка очень ценна!
Спасибо, очень полезное видео и хорошо объяснили!)
И Вам спасибо, что смотрите! Заказывайте новые видео ;)
Вау.... просто, вау! Спасибо!
🎉🎉🎉
Очень хорошее и понятное видео. А нет отдельно видео про врапперы, чтобы лучше понимать, почему именно надо передавать this в таких случаях?
Пока нет такого видео. Но спасибо за идею, сниму!
Пуууушка!! Премного благодарен! 🔥🚀🌠
Третий раз пересматриваю, но вроде понял наконец-то 😅
жиза)
Расскажите пожалуйста про работу с ветками, при помощи рекурсии (Связный список (Linked Lists))
Полезная тема. Сделаем.
А различается задержка в десктопной и мобильной версии?? На моб. то медленней набор. Видео - Супер! Подписался на канал. )))
Отличный вопрос. На мобильном набор действительно медленней. + ко всему на мобильном более критично количество запросов которое отправляется. Конкретных числе по задержке у меня нет. 200мс которые я показывал в примере - это число котороя я для себя вывел экспериментальным путем. Я просто пробовал ставить разные задержки и печатал текст и смотрел как ведет себя форма при различной скорости печати и задержки. 200-250 милисекунд достаточно для того чтобы не отправлять слишком много запросов если человек печатает быстро и в тоже время это не большая задержка (которую пользователь почти не замечает) после того как он завершил печатать и перед отправкой запроса. Думаю надо также опытным путем попробовать вывести такую задержку для мобильного.
С другой стороны сейчас и интернет быстрее и сервера мощнее и уже не так супер критично если мы вдруг отправим несколько "лишних" запросов на сервер. Просто для пользователя интерфейс выйдет более "отзывчивый" (на каждое нажатие у него видны изменения интерфейса)
Возьму на заметку) спасибо
Отличное видео, открыл для себя новый канал (подписка)
Есть вопрос: в либах типа андрэскора, в debounce есть такой параметр immediate, что он дает?
Рад, что понравилось! Immediate (принимает true/false) позволяет вызывать колбек на "переднем" крае задержки или в конце. Стоит ли вызывать колбек сразу - а потом ждать или вначале ждем потом вызываем (как в случае с этим видео). В качестве примера официальная документация приводит случай - если есть кнопка сабмит - и вначале хочется засабмитить форму, а потом сделать таймаут, чтобы не обрабатывать случайные двойные нажатия.
Хорошее объяснение, спасибо
привет, а что с курсами? Front-end science ждет перезагрузка?
Обязательно! На англоязычный поток пойдешь?
@@frontendscience если вести лично вы будете то да)
Після троттла було б непогано побачити відео про clickOutside. Поширений випадок - це закрити дропдаун, якщо клікнути на будь-який елемент за його межами.
очень доходчиво, мерси
Благодарю за видео, помогло очень.
Хорошее видео!
почему fn.apply если имеем стрелочную функцию ? пожалуйста пример
Хороший вопрос! :) Все дело в том, что наша функция которую мы вызываем, никак не использует контекст this. Поэтому формально он даже не используется. Мы можем написать fn.apply(null, arguments) и все будет и дальше работать. Нам важно вызывать нашу исходную функцию и передавать в него актуальные аргументы. А this в ней не используется.
спасибо от души
И Вам, что смотрите!
Спасибо за полезный контент
Взял на вооружение)
Ну вот, подсунулось видео, спать пора, но теперь придется до утра разбираться как это работает, напридумывают же всякого, апплаи какие-то, одни функции просто записаны, другие через знак равно, какой-то this в аргументе. Но за видео спасибо конечно, звучит очень полезно.
Так ты поспал вообще?)
@@frontendscience 3 дня ушло чтоб разобраться!
@@antonarbus круто! Здорово что разобрался!
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, возвращает лист аргументов функции
Функция 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 он не теряется, он просто внешний
Очень познавательно, спасибо! Однако я одного не понял: если мы вызываем функцию debounce на каждый keyup, то почему у нас переменная timeout не перезаписывается каждый раз на undefined?
На keyUp у нас вызывается не debounce, а onChange. Функция debounce у нас вызывается только один раз и во время этого единственного вызова она возвращает новую (отдебаунсенную) функцию, которая и перезаписывается в onChange.
У меня скорее вопрос, насколько это норм практика - так перезаписывать функцию (onChange). То есть не в новую константу, а прямо в старую, по сути теряя доступ к начальной неотдебаунсенной функции (но это не точно)
пушка. Спасибо )
В каком редакторе кода вы пишете?
WebStorm
виде попало в рекомендованные к Iggy Azalea - Mo Bounce (Official Music Video)
:)
спасибо пол дня сидел сам пытался это сделать
Рад, что оказалось полезно!
можете объяснить, а зачем усложнять и писать 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
но ведь debounce возвращает функцию , так ее ж запустить надо , а где запуск происходит ? -этот момент не понятен
в 14й строке мы переопределили onChange - теперь ей мы присвоили функцию которую debounce вернул. В 16й строке у нас навешен обработчик события. Он то и вызывает нашу функцию постоянно, когда происходит событие keyup
зачем ты используешь apply? какой кейс покрывает?
для того чтобы закинуть в функцию которая приходит в debounce аргументы;
тело функции на 4 строке, можно прописать и иначе. { fn(...arguments) } - смысл и результат будет тот же.
то есть, когда сработает функция fnCall , она вызовет fn и передаст в нее аргументы которые придут с функцией fn.
🔥🔥🔥
идея интересная, но вот как мне не нравится что можно а
взять и переопределить функцию, вот не заметишь ты эту строчку с присваиванием и будешь искать ошибку не там...
"нам колбаса нужна" )))
Добрый день, подскажите пожалуйста что мне нужно знать что бы выполнить следующую задачу: я хочу сделать таблицу с формулами на сайте, чтобы при внесении в ячейку значений в диапазоне от 0 до 50, в другой ячейки выводилось значение 1, а если диапазон от 50 до 100 то в другой ячейки выводится значение 2 и т.д.
Какой язык программирования мне поможет это реализовать и какими библиотеками можно воспользоваться?
Ну если это все задача то это очень отлично реализуемо на обычном js. Без каких либо библиотек.
@@frontendscience спасибо
топ
Топ годнота
Так вот что это значит в rxjs (reative x)
=))) это был декоратор!
Да, debounce это функция декоратор :)
Я думал что классический дебаунс это когда функция сразу вызывается первый раз, а потом просто вызов не произойдет если попытаемся вызвать еще раз слишком быстро
Это выглядит как матрешка) Зато поняла, зачем замыкания!
Всё круто, но зачем усложнять биндингом контекста?
Потому что в функции, которую мы дебаунсим, может использоваться контекст.
@@frontendscience Спасибо за ответ
кто нибудь пробовал набрать колбасу за 200мс? ))
🤣
Кривая функция, не совсем правильная