19.5.3. Отмена, задержка и постановка эффектов в очередь
В библиотеке jQuery определяется еще несколько методов, имеющих отношение к анимационным эффектам и очередям, которые необходимо знать. Первым из них является метод
stop:
он останавливает воспроизведение текущего анимационного эффекта для выбранных элементов. Метод
stop
принимает два необязательных логических аргумента.
Если в первом аргументе передать true, очередь анимационных эффектов для выбранных элементов будет очищена: т. е. вместе с текущим эффектом будут отменены все остальные эффекты, находящиеся в очереди. По умолчанию этот аргумент принимает значение false: если аргумент не указан, эффекты, находящиеся в очереди, не отменяются. Второй аргумент определяет, должны ли изменяемые CSS-свойства остаться в текущем состоянии или им должны быть присвоены конечные значения. Значение true во втором аргументе заставляет присвоить им конечные значения. Значение false (или отсутствие аргумента) оставляет текущие значения CSS-свойств.
Когда анимационные эффекты запускаются по событиям, возникающим в результате действий пользователя, может потребоваться отменить все текущие и запланированные анимационные эффекты, прежде чем запустить новые. Например:
// Сделать изображения непрозрачными, когда указатель мыши находится над ними.
// Не забудьте отменить все запланированные анимационные эффекты по событиям мыши!
$("img").bind({
mouseover: function { S(this).stop.fadeTo(300, 1.0); },
mouseout: function { S(this).stop.fadeTo(300, 0.5): }
}):
Второй метод, связанный с анимацией, который мы рассмотрим здесь, - это метод
delay.
Он просто добавляет задержку в очередь эффектов. В первом аргументе он принимает задержку в миллисекундах (или строку), а во втором необязательном аргументе - имя очереди (указывать второй аргумент обычно не требуется: об именах очередей будет рассказываться ниже). Метод
delay
можно использовать в составных анимационных эффектах, как показано ниже:
// Быстро растворить элемент до половины, подождать, а затем свернуть его
$("img").fadeTo(100. 0.5).delay(200).slideUp;
В примере выше, где применялся метод
stop,
были использованы обработчики событий «mouseover* и «mouseout* для плавного изменения непрозрачности изображений. Этот пример можно усовершенствовать, если добавить в него короткую задержку перед запуском анимационного эффекта. При таком подходе, если указатель мыши быстро пересекает изображение без остановки, никакого анимационного эффекта не возникает:
$("img"). bind({
mouseover: function { S(this).stop(true).delay(100).fadeTo(300, 1.0): },
mouseout: function { S(this).stop(true).fadeTo(300, 0.5): }
});
Последняя группа методов, с которыми мы познакомимся, предоставляют низкоуровневый доступ к механизму очередей в библиотеке jQuery. Очереди в библиотеке jQuery реализованы в виде списков функций, которые выполняются в порядке их следования. Каждая очередь связана с определенным элементом документа (или с объектом
Document
или
Window
), и все очереди в элементах не зависят друг от друга. Добавить новую функцию в очередь можно с помощью метода
queue.
Когда функция достигнет головы очереди, она будет автоматически исключена из очереди и вызвана. Внутри этой функции ключевое слово
this
ссылается на элемент, с которым связана данная очередь. В единственном аргументе функции будет передана другая функция. Когда функция из очереди завершит свою работу, она должна вызвать переданную ей функцию; тем самым она запустит следующую операцию из очереди. Если эта функция не будет вызвана, обработка очереди будет заморожена и оставшиеся в ней функции никогда не
будут вызваны.
Мы уже знаем, что методам анимационных эффектов можно передавать функции обратного вызова для выполнения некоторых действий по завершении воспроизведения эффекта. Того же эффекта можно добиться, поместив эту функцию в очередь:
// Проявить элемент, подождать, записать в него текст, и изменить его рамку
}).animate({borderWidth: "+=10рх;"}); // Увеличить толщину рамки
Аргумент с функцией, который передается функции, помещаемой в очередь, - это новая особенность, появившаяся в версии jQuery 1.4. При использовании более ранних версий библиотеки функции в очереди извлекали следующую функцию «вручную», вызывая метод
dequeue
:
$(this).dequeue; // Вместо next
Если очередь пуста, метод
dequeue
ничего не делает. В противном случае он удаляет функцию, находящуюся в голове очереди, и вызывает ее, устанавливая значение ссылки
this
и передавая функцию, описанную выше.
Кроме того, существует еще несколько методов управления очередью вручную. Метод
clearQueue
очищает очередь. Если вместо единственной функции передать методу
queue
массив функций, он заменит текущую очередь новым массивом функций. А вызов метода
queue(
) без аргумента вернет текущую очередь в виде массива. Кроме того, библиотека jQuery определяет версии методов
queue
и
dequeue
в виде вспомогательных функций. Например, если потребуется добавить функцию f в очередь элемента е, сделать это можно будет с помощью метода или функции:
$(е).queue(f); // Создать объект jQuery, хранящий е. и вызвать метод queue
jQuery.queue(e,f); // Просто вызвать вспомогательную функцию jQuery.queue
Наконец, обратите внимание, что методы
queue, dequeue
и
clearQueue
принимают необязательный первый аргумент с именем очереди. Методы анимационных эффектов используют очередь с именем «fx» и именно эта очередь используется по умолчанию, если имя очереди не указано явно. Механизм очередей в библиотеке jQuery с успехом можно использовать для выполнения асинхронных операций в определенной последовательности: вместо того чтобы передавать функцию обратного вызова каждой асинхронной операции, чтобы она запускала следующую функцию в последовательности, для управления последовательностью можно использовать очередь. Просто используйте имя очереди, отличное от «fx», и не забывайте, что функции в очереди не вызываются автоматически. Чтобы запустить первую функцию в очереди, необходимо явно вызвать метод
dequeue,
а по завершении каждая операция должна запускать следующую.
19.6. Реализация Ajax в библиотеке jQuery
Ajax - популярное название комплекса приемов разработки веб-приложений, в которых применяются возможности использования протокола HTTP (глава 18) для загрузки данных по мере необходимости без перезагрузки страниц. Приемы Ajax оказались настолько полезны в современных веб-приложениях, что в библиотеку jQuery были включены вспомогательные функции, реализующие и упрощающие их использование. Библиотека jQuery определяет один высокоуровневый вспомогательный метод и четыре высокоуровневые вспомогательные функции. Все они основаны на одной низкоуровневой функции,
jQuery.ajax.
В следующих подразделах мы сначала познакомимся с высокоуровневыми утилитами, а затем детально рассмотрим функцию
jQuery.ajax.
Понимание принципов действия функции
jQuery.ajax
совершенно необходимо, чтобы до конца понять, как действуют высокоуровневые утилиты, даже если вам никогда не придется использовать ее явно.