jQuery метод .clearQueue()

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

jQuery метод .clearQueue() по порядку удаляет из очереди все функции, которые еще не были выполнены.

Когда вызывается метод .clearQueue(), все функции в очереди, которые не были выполнены, удаляются из очереди, это поведение подобно методу .stop(true), но при этом метод .stop() предназначен для использования только с анимациями, а метод .clearQueue() может быть использован для удаления любой функции, которая была добавлена в общую очередь jQuery, с использованием метода .queue().

Каждый элемент может иметь от одной до нескольких очередей функций, присоединенных к нему jQuery. В большинстве приложений используется только одна очередь (называемая "fx"). Очереди позволяют асинхронно вызывать последовательность действий над элементом без остановки выполнения программы. Типичным примером этого является вызов нескольких методов анимации для элемента подряд (например, скрытие элемента, а затем отображение, длина очереди анимаций в этом случае составит равной двум).

jQuery синтаксис:

Синтаксис 1.2:

$( selector ).clearQueue()
$( selector ).clearQueue( queueName ) // с указанием имени очереди

queueName - String

Добавлен в версии jQuery

Значения параметров

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

В этом примере мы рассмотрим использование методов .clearQueue() и .stop():

Пример использования jQuery методов .clearQueue() и .stop()

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 4.0.0.

index.html

HTML

<button class="start">start</button>
<button class="clear">clearQueue()</button>
<button class="stop">stop(true)</button>
<button class="stop2">stop(true, true)</button>
<div></div>

main.js

JavaScript

$(document).ready(function () {
    function first() {
        $('div')
            .css('width', '80px')
            .animate({ width: '30%' }, 2000)
            .animate({ width: '50%' }, 2000)
            .animate({ width: '70%' }, 2000)
            .animate({ width: '90%' }, 2000)
    }
    $('.start').click(function () {
        first()
    })
    $('.clear').click(function () {
        $('div').clearQueue()
    })
    $('.stop').click(function () {
        $('div').stop(true)
    })
    $('.stop2').click(function () {
        $('div').stop(true, true)
    })
})

style.css

CSS

div {
    width: 80px;
    height: 80px;
    border: 2px solid orange;
    margin-top: 50px;
}

В этом примере мы разместили в документе один элемент <div> и четыре кнопки (элементы <button>), для каждой назначили обработчик события "click" (клик левой кнопкой мыши):

• При нажатии на элемент с классом start вызываем функцию, которая запускает функцию first(), которая выполняет анимации элемента <div>. Функция с помощью метода .css() устанавливает элементу первоначальную ширину, заданную в стилях, это необходимо для возможности перезапуска анимации, затем с помощью методов .animate() поочередно запускает четыре различных анимации, которые увеличивают ширину элемента, длительностью 2 секунды каждая.
• При нажатии на элемент с классом clear вызываем функцию, которая с помощью метода .clearQueue() по порядку удаляем из очереди все функции, которые еще не были выполнены (анимации у выбранного элемента <div>).
• При нажатии на элемент с классом stop вызываем функцию, которая с помощью метода .stop() останавливает все выполняющиеся в настоящее время анимации и удаляет все очереди анимаций у выбранного элемента <div>. Обратите внимание, что в отличие от метода .clearQueue() текущая анимация не проигрывается, а немедленно останавливается.
• При нажатии на элемент с классом stop2 вызываем функцию, которая с помощью метода .stop() оостанавливает все выполняющиеся в настоящее время анимации, удаляет все очереди анимаций и завершает все анимации у выбранного элемента <div>. Это аналогично использованию метода .finish(), за тем исключением, что CSS свойства не устанавливаются к их конечным значениям.