我发现queue()/dequeue()上的jQuery.com文档太简单,难以理解。jQuery中的队列到底是什么?我应该如何使用它们
jQuery.queue()和.dequeue()
jQuery中的队列用于动画。你可以用它们做任何你喜欢的用途。它们是一个函数数组,使用jQuery.data()按元素存储。它们是先进先出(FIFO)。您可以通过调用.queue()将函数添加到队列中,然后使用.dequeue()删除(通过调用)函数
为了理解内部jQuery队列函数,阅读源代码并查看示例对我帮助很大。我见过的队列函数的最好例子之一是.delay():
$.fn.delay=函数(时间、类型){
time=jQuery.fx?jQuery.fx.speeds[time]| | time:time;
类型=类型| |“fx”;
返回此.queue(类型,函数(){
var elem=这个;
setTimeout(函数(){
jQuery.dequeue(elem,type);
},时间);
});
};
默认队列-fx
jQuery中的默认队列是fx。默认队列具有一些不与其他队列共享的特殊属性
- 自动启动:调用
$(elem).queue(function(){})时fx队列将自动dequeue下一个函数,并在队列尚未启动时运行它 - ‘inprogress’哨兵:每当您
从fx队列中退出一个函数时,它将取消移位()(推入数组的第一个位置)字符串“inprogress”,该字符串标记队列当前正在运行 - 这是默认设置默认情况下,
fx队列由.animate()和所有调用它的函数使用
注意:如果您使用的是自定义队列,则必须手动.dequeue()这些函数,它们不会自动启动
检索/设置队列
您可以通过调用.queue()来检索对jQuery队列的引用,而无需函数参数。如果要查看队列中有多少项,可以使用该方法。您可以使用push、pop、unshift、shift在适当的位置操作队列。通过将数组传递给.queue()函数,可以替换整个队列
快速示例:
//假设$elem是一个jQuery对象,它指向我们正在制作动画的某个元素。
var queue=$elem.queue();
//从动画队列中删除最后一个函数。
var lastFunc=queue.pop();
//将其插入开头:
queue.unshift(lastFunc);
//将队列替换为队列中的前三项
$elem.queue(queue.slice(0,3));
动画(fx)队列示例:
在jsFiddle上运行示例
$(函数(){
//让我们用谷歌地图做点什么:
var$map=$(“#map_画布”);
var mylatng=new google.maps.LatLng(-34.397150.644);
var myOptions={zoom:8,center:mylatng,mapTypeId:google.maps.mapTypeId.ROADMAP};
var geocoder=new google.maps.geocoder();
var map=new google.maps.map($map[0],myOptions);
var resized=函数(){
//简单动画回调-让贴图知道我们调整了大小
google.maps.event.trigger(映射,'resize');
};
//等2秒钟
$map.delay(2000年);
//调整div的大小:
$map.animate({
宽度:250,
身高:250,
边缘左:250,
玛金托普:250
},已调整大小);
//地理编码
$map.queue(函数(下一个){
//查找stackoverflow的whois地址:
地理编码员。地理编码({'address':'55 Broadway New York NY 10006'},HandlerResponse);
功能句柄响应(结果、状态){
if(status==google.maps.GeocoderStatus.OK){
var location=results[0]。geometry.location;
map.setZoom(13);
地图设置中心(位置);
新的google.maps.Marker({map:map,position:location});
}
//返回地理编码器结果,继续动画:
next();
}
});
//在我们发现堆栈溢出后,再等待3秒钟
$map.delay(3000);
//然后再次调整地图的大小
$map.animate({
宽度:500,
身高:500,
marginLeft:0,
玛金托普:0
},已调整大小);
});
另一个自定义队列示例
在jsFiddle上运行示例
var theQueue=$({});//空对象上的jQuery—完美的队列持有者
$.each([1,2,3],函数(i,num){
//让我们向队列中添加一些非常简单的函数:
queue.queue('alerts',函数(next){
//显示一些内容,如果他们点击“是”,则运行下一个函数。
如果(确认('index:'+i+'='+num+'\n运行下一个函数?')){
next();
}
});
});
//创建一个按钮以运行队列:
$(“<;按钮>;”{
文本:“运行队列”,
单击:函数(){
theQueue.dequeue(“警报”);
}
}).附于(“主体”);
//创建一个按钮以显示长度:
$(“<;按钮>;”{
文本:“显示长度”,
单击:函数(){
警报(theQueue.queue('alerts').length);
}
}).附于(“主体”);
排队Ajax调用:
我开发了一个$.ajaxQueue()插件,它使用$.Deferred、.queue()、和$.ajax()来传递一个在请求完成时解析的承诺。另一个版本的$.ajaxQueue仍然可以在1.4中使用,发布在我对Ajax请求排序的回答中
/*
*ajaxQueue-用于ajax请求的队列
*
*(c)2011年Corey Frang
*MIT和GPL许可下的双重许可。
*
*需要jquery1.5+
*/
(函数($){
//在一个空对象上使用jQuery,我们将使用它作为队列
var ajaxQueue=$({});
$.ajaxQueue=函数(ajaxOpts){
var jqXHR,
dfd=$.Deferred(),
promise=dfd.promise();
//对ajax请求进行排队
ajaxQueue.queue(doRequest);
//添加abort方法
promise.abort=函数(statusText){
//如果jqXHR处于活动状态,则代理中止jqXHR
if(jqXHR){
返回jqXHR.abort(statusText);
}
//如果还没有jqXHR,我们需要从队列中删除它
var queue=ajaxQueue.queue(),
索引=$.inArray(doRequest,队列);
如果(索引>;-1){
队列拼接(索引,1);
}
//然后拒绝延期付款
dfd.rejectWith(ajaxOpts.context | | ajaxOpts,
[承诺,状态文本,”];
回报承诺;
};
//运行实际查询
函数doRequest(下一个){
jqXHR=$.ajax(ajaxOpts)
.完成(dfd.resolve)
.失败(dfd.reject)
.然后(下一个,下一个);
}
回报承诺;
};
})(jQuery);
我现在在learn.jquery.com上添加了这篇文章,该网站上还有其他关于队列的精彩文章,快去看看。