Таймауты

Umbrella JS предоставляет лёгкий и лаконичный интерфейс для работы с DOM, событиями и анимацией, сохраняя при этом совместимость с нативными методами JavaScript. Одной из ключевых возможностей является управление таймаутами и задержками выполнения функций, что важно при асинхронной работе с элементами страницы или при создании анимаций и эффектов.

Основной метод u().delay()

Umbrella JS включает метод .delay(), который позволяет откладывать выполнение функций для выбранных элементов. Синтаксис выглядит следующим образом:

u(selector).delay(ms, callback);
  • selector — CSS-селектор или DOM-элемент, обернутый в u().
  • ms — время задержки в миллисекундах.
  • callback — функция, которая будет выполнена после истечения времени.

Пример:

u('.box').delay(1000, function(el) {
    el.style.backgroundColor = 'red';
});

В этом примере каждому элементу с классом .box через 1000 миллисекунд будет применён красный фон.

Цепочки методов и таймауты

Метод .delay() удобно использовать в цепочках методов Umbrella JS. Это позволяет управлять последовательностью действий над элементами без создания отдельных функций или сложных вложенных вызовов.

u('.item')
  .hide()
  .delay(500, function(el) {
      el.show();
  });

Здесь сначала элементы скрываются, через 500 миллисекунд снова отображаются. При этом .hide() и .show() являются методами Umbrella JS, а .delay() аккуратно вставляет паузу между действиями.

Взаимодействие с асинхронными функциями

Метод .delay() может применяться с асинхронными функциями, что расширяет возможности работы с API, анимацией или динамическими изменениями DOM:

u('#loadButton').on('click', async function(el) {
    el.text('Загрузка...');
    await u(el).delay(2000);
    el.text('Готово');
});

В этом примере кнопка изменяет текст, ожидает 2 секунды и затем меняет текст снова. Благодаря совместимости с async/await управление таймингом становится более наглядным и структурированным.

Управление несколькими таймаутами

Umbrella JS позволяет применять .delay() к набору элементов одновременно. Для каждого элемента таймаут будет независимым:

u('.notification').delay(3000, function(el) {
    el.hide();
});

Все элементы с классом .notification через 3 секунды исчезнут, причём каждая нода будет отслеживать свой таймер, предотвращая конфликты между элементами.

Особенности работы с контекстом this

Внутри callback-функции .delay() переменная el всегда ссылается на конкретный DOM-элемент, к которому применяется задержка. Это позволяет безопасно изменять свойства элемента без дополнительных замыканий или обращения к внешним переменным.

u('.card').delay(1000, function(el) {
    el.style.transform = 'scale(1.1)';
});

Использование this в данном контексте ограничено и не рекомендуется, так как Umbrella JS передаёт элемент как аргумент el для большей предсказуемости.

Сравнение с setTimeout

Метод .delay() является удобной обёрткой над стандартным setTimeout, но имеет следующие преимущества:

  • Применим непосредственно к набору элементов через цепочку методов.
  • Автоматически передаёт каждый элемент в callback, избавляя от необходимости вручную итерироваться.
  • Интегрируется с методами Umbrella JS, такими как .hide(), .show(), .addClass(), .removeClass().
  • Легче читается и поддерживается в крупных проектах, чем вложенные setTimeout.

Пример с setTimeout для сравнения:

u('.box').each(function(el) {
    setTimeout(function() {
        el.style.opacity = '0';
    }, 1000);
});

Эквивалент через .delay() короче и нагляднее:

u('.box').delay(1000, function(el) {
    el.style.opacity = '0';
});

Рекомендации по использованию

  1. Малые задержки для UI: для плавных анимаций и переходов лучше использовать значения 100–500 мс.
  2. Большие задержки для уведомлений: для всплывающих сообщений или таймеров можно применять несколько секунд.
  3. Комбинирование с методами анимации: .fadeIn(), .fadeOut() и .slideUp() работают хорошо в цепочке с .delay().
  4. Минимизация callback-сложности: избегать глубоких вложений функций, чтобы цепочка методов оставалась читаемой.

Примеры практического использования

Пошаговое появление элементов:

u('.step').each(function(el, i) {
    u(el).delay(i * 500, function(el) {
        el.show();
    });
});

Каждый элемент появляется с задержкой, кратной его индексу, создавая эффект «ступенчатого появления».

Временное добавление класса:

u('.highlight').delay(2000, function(el) {
    el.addClass('active');
});

Класс добавляется через 2 секунды, после чего можно применять дополнительные анимации или логику.

Использование таймаутов в Umbrella JS позволяет создавать динамичные интерфейсы, упрощает синхронизацию действий и делает код более читаемым и компактным по сравнению с нативными методами JavaScript.

Оглавление