Исправляет функцию `debounce()` by loonlylokly · Pull Request #5493 · doka-guide/content

loonlylokly · 2024-08-18T10:05:20Z

Описание

Переписал функцию debounce() на более простой вариант без проверки времени и переделал описание работы.
Вот пример проблемы с которой столкнулся: https://jsbin.com/ceqetosabi/2/edit?js,console

Чек-лист

Текст оформлен согласно руководству по стилю
Ссылки на внутренние материалы начинаются со слеша и заканчиваются слэшем либо якорем на заголовок (/css/color/, /tools/json/, /tools/gulp/#kak-ponyat)
Ссылки на картинки, видео и демки относительные (images/example.png, demos/example/, ../demos/example/)

js/debounce/index.md

js/debounce/demos/debounced-search/index.html

js/debounce/index.md

js/debounce/demos/debounced-search/index.html

js/debounce/index.md

loonlylokly · 2024-08-26T18:16:00Z

@vitya-ne Что скажешь по тексту объяснения? Норм?

vitya-ne · 2024-08-26T19:43:00Z

@vitya-ne Что скажешь по тексту объяснения? Норм?

чтобы callback функция передаваемая в setTimeout не потеряла контекст его нужно привязать с помощью apply. Это важно при работе с обработчиком событий браузера.

По смыслу все верно, но есть, как мне кажется, неточности )

не то что бы функция callback может потерять контекст, она его может не получить. по-моему это не совсем тоже самое.
используя .apply() мы не привязываем контекст (для этого есть .bind()), а устанавливаем его при вызове.
может стоит категоричное 'нужно' поменять на 'можно' ? .call() ведь тоже тут справится.
Это важно при работе с обработчиком событий браузера я бы заменил на Это важно если обработчик события обращается кthis`.

vitya-ne · 2024-09-23T14:06:18Z

js/debounce/index.md

+
+Отметим несколько важных моментов:
+
+- возвращаемая функция `perform` НЕ должна быть стрелочной, чтобы не терялся контекст;


Давайте тут уточним:

возвращаемая функция perform НЕ должна быть стрелочной, чтобы не терялся контекст callback функции;

Мне кажется это не очень хорошая рекомендация. Я бы постаралась избегать неявных this bindings.
Я предположу что здесь проблема в том что this теряет контекст кликнутого элемента. Для таких случаев я бы просто использовала currentTarget. Для классов - стрелочную функцию метод

С другой стороны хуже от этого не будет. Давайте так: если вы хотите сохранить контекст колбек-метода не используйте стрелочную функцию для perform. Мелкое различие которое не так сильно заостряет на этом внимание )

vitya-ne · 2024-09-23T14:17:46Z

js/debounce/index.md

+Отметим несколько важных моментов:
+
+- возвращаемая функция `perform` НЕ должна быть стрелочной, чтобы не терялся контекст;
+- чтобы `callback` функция, передаваемая в `setTimeout`, не потеряла контекст, его нужно привязать с помощью `apply`. Это важно при работе с обработчиком событий браузера.


Давайте тут тоже уточним:

чтобы callback функция, передаваемая в setTimeout, получила контекст, укажем его с помощью apply. Это важно при использовании debounce для обработчиков событий браузера.

skorobaeus · 2024-10-14T09:27:17Z

@HellSquirrel приди, функции погляди!

HellSquirrel · 2024-11-19T00:11:06Z

js/debounce/index.md

+
+Отметим несколько важных моментов:
+
+- возвращаемая функция `perform` НЕ должна быть стрелочной, чтобы не терялся контекст;


Мне кажется это не очень хорошая рекомендация. Я бы постаралась избегать неявных this bindings.
Я предположу что здесь проблема в том что this теряет контекст кликнутого элемента. Для таких случаев я бы просто использовала currentTarget. Для классов - стрелочную функцию метод

HellSquirrel · 2024-11-19T00:11:44Z

js/debounce/index.md

+
+1. При вызове функции `perform`, сначала выполняется `clearTimeout(timer)`. Так удаляется ранее установленный таймер, если он существует. Это необходимо, чтобы предотвратить выполнение предыдущего вызова функции `callback`, если новый вызов произошёл до завершения задержки.
+1. Устанавливается новый таймер с помощью `setTimeout`, и ссылка на этот таймер сохраняется в переменной `timer`.
+1. В `setTimeout` первым аргументом передаётся стрелочная функция с вызовом нашего `callback` c привязкой контектса и передачей всех аргументов. Вторым аргументом передаётся задержка `delay`.


Suggested change

1. В `setTimeout` первым аргументом передаётся стрелочная функция с вызовом нашего `callback` c привязкой контектса и передачей всех аргументов. Вторым аргументом передаётся задержка `delay`.

1. В `setTimeout` первым аргументом передаётся стрелочная функция с вызовом нашего `callback` c привязкой контекста и передачей всех аргументов. Вторым аргументом передаётся задержка `delay`.

HellSquirrel · 2024-11-19T00:14:02Z

js/debounce/index.md

-Обратите внимание, что API функции не поменялось. Мы как передавали [`event`](/js/event/), так и передаём. То есть для внешнего мира debounced-функция ведёт себя точно так же, как и простая функция-обработчик.
-
-Это удобно, потому что меняется лишь одна небольшая часть программы, не затрагивая системы в целом.
+Обратите внимание, что API функции не поменялось. Мы как передавали [`event`](/js/event/), так и передаём. То есть для внешнего мира debounced-функция ведёт себя точно так же, как и простая функция-обработчик. Это удобно, потому что меняется лишь одна небольшая часть программы, не затрагивая системы в целом.


Кстати api поменялось. Синхронная функция - обработчик могла возвращать значение, debounce версия этого делать не может

она нужна, чтобы результат поиска помещался в окошко

github-actions · 2025-01-27T10:24:43Z

Превью контента из 6524345 опубликовано.

Исправляет функцию debounce

69cb59c

loonlylokly requested review from HellSquirrel and skorobaeus as code owners August 18, 2024 10:05

loonlylokly changed the title ~~Исправляет функцию debounce~~ Исправляет функцию debounce() Aug 18, 2024

github-actions bot added js Контент по JavaScript статья Расширенный материал labels Aug 18, 2024

TatianaFokina assigned loonlylokly Aug 18, 2024

TatianaFokina reviewed Aug 18, 2024

View reviewed changes