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