Задержка выполнения скрипта в JavaScript без jQuery

Быстрый ответ

Если вы хотите выполнить код JavaScript с задержкой, воспользуйтесь функцией setTimeout, передав в неё функцию обратного вызова (callback-функцию) и желаемую задержку в миллисекундах.

setTimeout(() => console.log('Выполнено с задержкой...'), 3000);

Здесь значение 3000 обозначает задержку в 3 секунды. Параметр задержки можно настроить по своему усмотрению. setTimeout работает асинхронно и не перерывает выполнение основного скрипта.

I. Освоение setTimeout

1.1 Основные принципы работы с задержкой

Функция setTimeout базируется на callback-функции и определённом временном интервале, после которого эта функция будет вызвана.

let lifeMotto = 'Жизнь прекрасна';
setTimeout(() => {console.log(lifeMotto);}, 2000); // lifeMotto будет выведено через 2 секунды

Подробнее об этом расскажет наш спикер на видео

1.2 Асинхронность setTimeout

Важно осознавать асинхронность setTimeout: скрипт продолжает своё выполнение, пока таймер ожидает свой момент. Это означает, что данные, использованные в callback-функции, могут устареть или измениться.

1.3 Ошибки, которые могут подстерегать

Попытки создать задержку посредством бесконечных циклов while или объектов Date могут привести к "зависанию" интерфейса. В однопоточном JavaScript такие блокирующие операции мешают нормальной работе страницы.

1.4 Опасность утечек памяти

При работе с циклами или при использовании вложенных setTimeout/setInterval возможны утечки памяти. Замыкания и неправильное управление таймерами могут привести к чрезмерному использованию ресурсов.

II. Особенности использования setTimeout

2.1 Создание своих функций задержек

Определение собственной функции задержки позволяет гибко настраивать время. Применение замыканий может сильно упростить этот процесс:

function createDelayFunction(delay) {
    return function(callback) {
        setTimeout(callback, delay); 
    };
}

const delayForTwoSeconds = createDelayFunction(2000);
delayForTwoSeconds(() => console.log('Выполнено с задержкой 2 секунды'));

2.2 Учёт временных расхождений

Точность задержек, сделанных с помощью setTimeout, может варьироваться из-за особенностей цикла событий в JavaScript. Целесообразно учитывать возможные небольшие отклонения.

2.3 Возможности применения

Функция setTimeout может быть полезна при решении различных задач: управлении последовательно выполняемыми анимациями, регулировке обработки событий и поддержании отзывчивости пользовательского интерфейса.

Визуализация

Представьте себе, что вы устраиваете экзотический чайный церемониал:

| Установка таймера        | Действие                 |
| ------------------------ | ------------------------ |
| 0 мин                    | 🚰 Наполнение чайника    |
| 1 мин                    | ⏳ Ожидание               |
| 2 мин                    | 🔔 Чайник готов          |
| 3 мин                    | 🍵 Заваривание чая       |
| 5 мин                    | ⏰ Время для чаепития!   |

После того как вы запустили таймер, вы можете заняться другими важными делами, пока определённые действия не начнут выполняться по прошествии установленного времени.

setTimeout(() => {
    console.log('🍵 Чай готов, приятного чаепития!');
}, 5000); // 5-минутная задержка для идеального чая

Точно так же, как и с таймером для чая, setTimeout дает возможность задаче выполняться в запланированное время, позволяя вам заниматься другими делами.

III. setTimeout на практике

3.1 Управление последовательностью выполнения

Применение setTimeout особенно актуально при увеличении объема и сложности кода. Это помогает организовать последовательное выполнение задач и планировать операции, которые должны следовать друг за другом.

3.2 Синергия с циклом событий и обновлением DOM

Понимание цикла событий поможет более эффективно использовать функцию setTimeout. Она позволяет браузеру обновлять элементы DOM и обрабатывать пользовательские события, не нарушая отзывчивости интерфейса.

3.3 Реализация неблокирующих задержек

В контексте повышенного внимания к пользовательскому опыту особенно важны неблокирующие задержки. setTimeout можно использовать для отложенного выполнения ресурсоемких задач, тем самым улучшая отзывчивость страницы.

Полезные материалы

1. Глобальная функция setTimeout() – Web API | MDN — официальная документация по setTimeout в JavaScript.
2. Тайминговые функции JavaScript — обзор функций управления выполнением кода по времени в JavaScript, включая setTimeout.
3. Планирование: setTimeout и setInterval — подробное рассмотрение функций планирования выполнения кода в JavaScript.
4. JavaScript: как передать параметры в callback-функцию setTimeout? – Stack Overflow — обсуждение типичных вопросов и задач, связанных с setTimeout.
5. JavaScript: понимание замыканий — замыкания в JavaScript и их роль для эффективного использования setTimeout.