Функции $.queue() и $.dequeue()

Определение и применение

Функция $.queue() хранит очередь шагов для одного DOM-элемента, а $.dequeue() запускает следующий шаг. Так можно последовательно выполнить действия над элементом без создания нескольких независимых таймеров.

Синтаксис

JavaScript

$.queue(element);
$.queue(element, queueName);
$.queue(element, queueName, callback);
$.queue(element, queueName, [firstStep, secondStep]);
$.dequeue(element, queueName);

Параметры и возвращаемое значение

element — DOM-узел, queueName — имя очереди; по умолчанию "fx". Чтение и изменение через $.queue() возвращают массив очереди. Переданная функция добавляется в конец, массив заменяет очередь. Статическая функция сама не начинает выполнение.

$.dequeue() возвращает undefined. Она извлекает следующий шаг и вызывает его с this, равным элементу. Первый аргумент шага — функция next, которую нужно вызвать после завершения работы, чтобы продолжить очередь. При асинхронном шаге вызывайте её в его обработчике завершения.

Особенности и совместимость

Не вызывайте одновременно next() и $.dequeue() для одного завершения: это может запустить лишний шаг. Если не вызвать ни один из них, очередь остановится. Для коллекции есть методы .queue() и .dequeue(); у метода коллекции автоматический запуск очереди fx отличается от статической функции.

Удаление ожидающих шагов не останавливает уже выполняемый код. В jQuery 4.0 модуль очередей доступен в полной сборке и отсутствует в slim.

Документация

Пример использования

Два последовательных шага: попробуйте сами

Первый шаг завершится по таймеру и только затем разрешит второй. Порядок сообщений: А → Б. Используется jQuery 4.0.0.

index.html

HTML

<div id="task">Задача</div>
<pre id="result"></pre>

main.js

JavaScript

const task = document.getElementById('task')
$.queue(task, 'steps', function (next) {
    setTimeout(function () {
        $('#result').append('А → ')
        next()
    }, 50)
})
$.queue(task, 'steps', function (next) {
    $('#result').append('Б')
    next()
})
$.dequeue(task, 'steps')