Очереди в jQuery используются для анимации. Вы можете использовать их для любых целей. Они представляют собой массив функций , хранимых для каждого элемента с использованием jQuery.data(). Они первыми-первыми-первыми (FIFO). Вы можете добавить функцию в очередь, вызвав .queue(), и удалить (вызвав) функции, используя .dequeue().
Чтобы понять внутренние функции очереди jQuery, чтение источника и просмотр примеров очень мне помогают. Один из лучших примеров функции очереди, которую я видел, это .delay():
$.fn.delay = function( time, type ) {
time = jQuery.fx ? jQuery.fx.speeds[time] || time : time;
type = type || "fx";
return this.queue( type, function() {
var elem = this;
setTimeout(function() {
jQuery.dequeue( elem, type );
}, time );
});
};
Очередь по умолчанию - fx
Очередь по умолчанию в jQuery fx. Очередь по умолчанию имеет некоторые специальные свойства, которые не используются другими очередями.
- Автоматический запуск: При вызове
$(elem).queue(function(){}); очередь fx автоматически dequeue запускает следующую функцию и запускает ее, если очередь еще не запущена.
- 'inprogress' sentinel: Всякий раз, когда вы
dequeue() функция из очереди fx, она будет unshift() (вставить в первое место массива) строку "inprogress" - что указывает, что очередь в данный момент выполняется.
- Это значение по умолчанию! Очередь
fx используется .animate() и всеми функциями, которые ее вызывают по умолчанию.
ПРИМЕЧАНИЕ: Если вы используете пользовательскую очередь, вы должны вручную .dequeue() функции, они не запустятся автоматически!
Получение / настройка очереди
Вы можете получить ссылку на очередь jQuery, вызвав .queue() без аргумента функции. Вы можете использовать метод, если вы хотите увидеть, сколько элементов в очереди. Вы можете использовать push, pop, unshift, shift для управления очередью на месте. Вы можете заменить всю очередь, передав массив в функцию .queue().
Быстрые примеры:
// lets assume $elem is a jQuery object that points to some element we are animating.
var queue = $elem.queue();
// remove the last function from the animation queue.
var lastFunc = queue.pop();
// insert it at the beginning:
queue.unshift(lastFunc);
// replace queue with the first three items in the queue
$elem.queue(queue.slice(0,3));
Пример очереди анимации (fx):
Пример запуска на jsFiddle
$(function() {
// lets do something with google maps:
var $map = $("#map_canvas");
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP};
var geocoder = new google.maps.Geocoder();
var map = new google.maps.Map($map[0], myOptions);
var resized = function() {
// simple animation callback - let maps know we resized
google.maps.event.trigger(map, 'resize');
};
// wait 2 seconds
$map.delay(2000);
// resize the div:
$map.animate({
width: 250,
height: 250,
marginLeft: 250,
marginTop:250
}, resized);
// geocode something
$map.queue(function(next) {
// find stackoverflow's whois address:
geocoder.geocode({'address': '55 Broadway New York NY 10006'},handleResponse);
function handleResponse(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var location = results[0].geometry.location;
map.setZoom(13);
map.setCenter(location);
new google.maps.Marker({ map: map, position: location });
}
// geocoder result returned, continue with animations:
next();
}
});
// after we find stack overflow, wait 3 more seconds
$map.delay(3000);
// and resize the map again
$map.animate({
width: 500,
height: 500,
marginLeft:0,
marginTop: 0
}, resized);
});
Другой пример пользовательской очереди
Пример запуска на jsFiddle
var theQueue = $({}); // jQuery on an empty object - a perfect queue holder
$.each([1,2,3],function(i, num) {
// lets add some really simple functions to a queue:
theQueue.queue('alerts', function(next) {
// show something, and if they hit "yes", run the next function.
if (confirm('index:'+i+' = '+num+'\nRun the next function?')) {
next();
}
});
});
// create a button to run the queue:
$("<button>", {
text: 'Run Queue',
click: function() {
theQueue.dequeue('alerts');
}
}).appendTo('body');
// create a button to show the length:
$("<button>", {
text: 'Show Length',
click: function() {
alert(theQueue.queue('alerts').length);
}
}).appendTo('body');
Очередь Ajax Calls:
Я разработал плагин $.ajaxQueue(), который использует $.Deferred, .queue() и $.ajax() для также передайте обратно обещание , которое разрешается после завершения запроса. Другая версия $.ajaxQueue, которая все еще работает в 1.4, опубликована в моем ответе на Последовательность запросов Ajax
/*
* jQuery.ajaxQueue - A queue for ajax requests
*
* (c) 2011 Corey Frang
* Dual licensed under the MIT and GPL licenses.
*
* Requires jQuery 1.5+
*/
(function($) {
// jQuery on an empty object, we are going to use this as our Queue
var ajaxQueue = $({});
$.ajaxQueue = function( ajaxOpts ) {
var jqXHR,
dfd = $.Deferred(),
promise = dfd.promise();
// queue our ajax request
ajaxQueue.queue( doRequest );
// add the abort method
promise.abort = function( statusText ) {
// proxy abort to the jqXHR if it is active
if ( jqXHR ) {
return jqXHR.abort( statusText );
}
// if there wasn't already a jqXHR we need to remove from queue
var queue = ajaxQueue.queue(),
index = $.inArray( doRequest, queue );
if ( index > -1 ) {
queue.splice( index, 1 );
}
// and then reject the deferred
dfd.rejectWith( ajaxOpts.context || ajaxOpts,
[ promise, statusText, "" ] );
return promise;
};
// run the actual query
function doRequest( next ) {
jqXHR = $.ajax( ajaxOpts )
.done( dfd.resolve )
.fail( dfd.reject )
.then( next, next );
}
return promise;
};
})(jQuery);
Я добавил это как статью на learn.jquery.com , на этом сайте есть и другие замечательные статьи об очередях, иди посмотри.