Задержки

Функция delay()

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

Синтаксис:

$(селектор).delay(время, очередь);
  • время — длительность задержки в миллисекундах (обязательный параметр).
  • очередь — имя очереди, в которой будет выполняться задержка. По умолчанию используется очередь "fx" для стандартных анимаций.

Пример:

$("#box")
  .slideUp(1000)
  .delay(500)
  .slideDown(1000);

В этом примере блок сначала скрывается за 1 секунду, затем происходит пауза в 0.5 секунды, после чего блок снова появляется за 1 секунду.

Очереди и метод queue()

jQuery использует систему очередей для управления последовательностью выполнения функций. Каждому элементу соответствует своя очередь с именем "fx" по умолчанию.

Метод queue() позволяет управлять этой очередью:

$(селектор).queue(очередь, функция);
  • очередь — имя очереди (по умолчанию "fx").
  • функция — функция, которая будет добавлена в очередь. Функция получает аргумент next, вызываемый для перехода к следующему элементу очереди.

Пример использования с задержкой:

$("#box").queue(function(next) {
    $(this).css("background-color", "red");
    setTimeout(next, 1000); // ручная задержка 1 секунда
});

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

Отличие delay() от setTimeout()

delay() работает только в рамках анимационной очереди jQuery, тогда как setTimeout() создаёт независимую задержку в выполнении кода. Использование delay() обеспечивает согласованное выполнение нескольких анимаций и позволяет управлять их последовательностью без вложенных колбэков.

Пример различия:

// delay внутри анимации
$("#box").slideUp(500).delay(1000).slideDown(500);

// setTimeout вне анимации
setTimeout(function() {
  $("#box").slideDown(500);
}, 1000);

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

Отмена задержки

Метод stop() позволяет прерывать текущую анимацию и очищать очередь. Если нужно отменить задержку, добавленную с помощью delay(), можно использовать:

$("#box").stop(true);
  • Параметр true очищает очередь, включая задержки, а false останавливает только текущую анимацию.

Практические сценарии применения задержек

  1. Пошаговая анимация элементов Создание эффектов последовательного появления или исчезновения элементов списка.
$("li").each(function(index) {
    $(this).delay(200 * index).fadeIn(500);
});
  1. Анимация с паузой между состояниями Использование delay() для показа подсказок или временных эффектов:
$("#tooltip")
  .fadeIn(300)
  .delay(2000)
  .fadeOut(300);
  1. Сложные цепочки с queue() Управление кастомными очередями и добавление собственных функций с задержкой:
$("#box").queue("custom", function(next) {
    $(this).css("color", "blue");
    setTimeout(next, 500);
}).queue("custom", function(next) {
    $(this).css("color", "green");
    next();
}).dequeue("custom");

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

  • Предпочтительно использовать delay() только в рамках анимаций, чтобы не нарушать логику выполнения основного кода.
  • Для сложной логики и работы с событиями лучше применять queue() с явным вызовом next().
  • Задержки в десятки и сотни миллисекунд удобны для плавного визуального эффекта, однако чрезмерные паузы могут ухудшить UX.

Итоговое понимание

Задержки в jQuery — это инструмент, позволяющий управлять временем между действиями анимаций. Метод delay() интегрирован с очередью анимаций "fx", обеспечивая простое и последовательное выполнение визуальных эффектов. Для более точного контроля используется система очередей с методами queue() и dequeue(), позволяющая комбинировать анимации и кастомные функции с временными паузами.

Оглавление