Lmst

How to Stop setTimeout From Losing This

Methods lose context when passed to timers.

#javascript #this #settimeout #bug #howto #context

https://www.youtube.com/watch?v=x6_dhTpC-tM

Closure in Loop Prints SAME Value?!

Closures CAPTURE variables by reference! All setTimeout callbacks share the SAME i variable. They all print 3, not 0, 1, 2! This is the classic closure trap!

#javascript #javascripttricks #closures #loops #settimeout #javascriptweird #javascriptquiz #codingchallenge #javascriptshorts #javascriptwtf #asyncclosures #advancedjavascript

https://www.youtube.com/watch?v=ojVEQm9ypyw

Closure With setTimeout Creates Chaos!

Using var in loops with setTimeout creates a closure trap! All timeouts print the same value. This breaks async code! Watch!

#javascript #javascripttricks #codingtips #programmingtutorial #closures #javascriptquiz #codingchallenge #javascriptshorts #javascriptbugs #settimeout #javascriptwtf #asyncclosures

setTimeout убил наши анимации: история спасения модальных окон

Всем привет! Давайте представим, что от бизнеса поступил запрос: "Нам надо, чтобы при входе на сайт сразу же открывалось модальное окно авторизации для сканирования клиентского QR-кода." Вы запускаете стабильно работающий проект, применяете useEffect с необходимой фичей и пустой зависимостью, а затем - начинаете тестировать. И вот незадача: модальное окно открывается на миллисекунду и моментально закрывается. При этом: логи в порядке, стейты меняются корректно, но модальное окно живет своей жизнью и наотрез отказывается работать, как ей предписано. Я потратил довольно длительное время на поиски этой ошибки. Но затем, удалив setTimeout , который мы использовали для анимирования модального окна, заметил, что все стало работать корректно. Длительный поиск вариантов анимирования открытия/закрытия модального окна не помог. Но стоит отметить, что я узнал множество способов и комбинаций его анимирования: как при помощи сторонних зависимостей, так и нативных. Использование сторонних зависимостей я отбросил сразу. Смириться, что все модальные окна на проекте отныне будут работать без красивых анимаций я не мог, поэтому сразу же приступил к поискам решения данной проблемы. Совершенно случайно наткнувшись на статью @GragertVD , которая, словом, не подходила под мои критерии поиска - я открыл для себя совершенно новый обработчик события onAnimationEnd и наконец решил указанную выше проблему. Именно поэтому мне захотелось рассказать о том, как я это сделал. В этой статье я расскажу:

https://habr.com/ru/articles/954624/

#settimeout #onAnimationEnd #React_анимации #useEffect #Tailwind_CSS #createPortal #конфликт_состояний #прерывание_анимаций #Открывается_и_сразу_закрывается #useAnimation_хук

timers.promises в Node.js

Привет, Хабр! Сегодня мы рассмотрим один из тех маленьких, но мощных апгрейдов Node.js, который вы, скорее всего, недооценивали. Речь о timers.promises — свежем и способе работать с setTimeout и setImmediate в асинхронных функциях.

https://habr.com/ru/companies/otus/articles/928660/

#nodejs #программирование #timerspromises #setTimeout #setImmediate #AbortSignal #asyncawait #таймеры_в_Nodejs

[Перевод] Способы разделения длительных задач в JavaScript

Иногда возникает необходимость разделить длительную дорогую (с точки зрения вычислений) задачу на несколько тиков (ticks) цикла событий (event loop). Существует множество способов это сделать. Рассмотрим их. Легко "уничтожить" пользовательский опыт, позволив длительной дорогой задаче захватить основной поток (main thread). Неважно, насколько сложным является приложение, цикл событий может выполнять только одну задачу за раз. Пока выполняется одна задача, другие ждут своей очереди. Как правило, задача выполняется настолько быстро, что пользователь ничего не замечает. Но так бывает не всегда.

https://habr.com/ru/companies/timeweb/articles/882418/

#timeweb_статьи_перевод #javascript #long_task #settimeout #promise #scheduler #requestidlecallback #requestanimationframe #длительная_задача #промис #планировщик #main_thread #call_stack #основной_поток #стек_вызовов