必知的技术知识:jQuery中queue和dequeue的用法

简介: 必知的技术知识:jQuery中queue和dequeue的用法

jQuery中的queue和dequeue是一组很有用的方法,他们对于一系列需要按次序运行的函数特别有用。特别animate动画,ajax,以及timeout等需要一定时间的函数


queue和dequeue的过程主要是:


1,用queue把函数加入队列(通常是函数数组)


2,用dequeue将函数数组中的第一个函数取出,并执行(用shift()方法取出并执行)


也就意味着当再次执行dequeue的时候,得到的是另一个函数了


同时也意味着,如果不执行dequeue,那么队列中的下一个函数永远不会执行


对于一个元素上执行animate方法加动画,jQuery内部也会将其加入名为 fx 的函数队列


而对于多个元素要依次执行动画,则必须我们手动设置队列//代码效果参考:http://www.lyjsj.net.cn/wx/art_24041.html

进行了。

一个例子,要两个div依次向左移动,点击这里查看


1 div {


2 background:#aaa;


3 width:18px;


4 height:18px;


5 position:absolute;


6 top:10px;


7 }


如果只是轮流移动次数较少,可以使用animate的回调函数来做,一个动画放在另一个动画的回调里边


比如


1 $(“#block1″).animate({left:”+=100″},function() {


2 $(“#block2″).animate({left:”+=100″},function() {


3 $(“#block1″).animate({left:”+=100″},function() {


4 $(“#block2″).animate({left:”+=100″},function() {


5 $(“#//代码效果参考:http://www.lyjsj.net.cn/wx/art_24039.html

block1″).animate({left:”+=100″},function(){

6 alert(“动画结束”);


7 });


8 });


9 });


10 });


11 });


但这种方法当动画较多的时候简直是残忍。


此时利用queue和dequeue则显得简单很多:


1 var FUNC=【


2 function() {$("#block1").animate({left:"+=100"},aniCB);},


3 function() {$("#block2").animate({left:"+=100"},aniCB);},


4 function() {$("#block1").animate({left:"+=100"},aniCB);},


5 function() {$("#block2").animate({left:"+=100"},aniCB);},


6 //代码效果参考:http://www.lyjsj.net.cn/wx/art_24037.html

function() {$("#block1").animate({left:"+=100"},aniCB);},

7 function(){alert("动画结束")}


8 】;


9 var aniCB=function() {


10 $(document).dequeue(“myAnimation”);


11 }


12 $(document).queue(“myAnimation”,FUNC);


13 aniCB();


1,我首先建议建立了一个函数数组,里边是一些列需要依次执行的动画


2,然后我定义了一个回调函数,用dequeue方法用来执行队列中的下一个函数


3,接着把这个函数数组放到document上的myAnimation的队列中(可以选择任何元素,我只是为了方便而把这个队列放在document上)


4,最后我开始执行队列中的第一个函数


这样做的好处在于函数数组是线性展开,增减起来非常方便。


而且,当不要要继续进行接下来动画的时候(比如用户点了某个按钮),只需要清空那个队列即可。而要增加更多则只需要加入队列即可


1 //清空队列


2 $(document).queue(“myAnimation”,【】);


3 //加一个新的函数放在最后


4 $(document).queue(“myAnimation”,function(){alert(“动画真的结束了!”)});


以前发过一个wait插件,用于让动画之间可以暂停一段时间


可以看一下,他也就是利用了这个原理,默认在fx中插入一个timeout,放到队列中,直到timeout结束后才执行dequeue继续执行队列中的下一个函数。


这当然也可以用于ajax之类的方法,如果需要一系列ajax交互,每个ajax都希望在前一个结束之后开始,之前最原始的方法就是用回调函数,但这样太麻烦了。同样利用queue添加队列,每次ajax之后的回调中执行一次dequeue即可。


如果没有使用jQuey库,也可以自己写段简易代码来解决这个问题。


来自:

相关文章
|
6月前
|
JavaScript
jQuery :nth-of-type(n)选择器的用法详解
jQuery中,:nth-of-type(n)选择器可以对selector选择器匹配选择到的所有HTML元素进行二次匹配选择,为了更好地阐述:nth-of-type(n)的语法,这里假设selector是一个元素p选择器,如此,:nth-of-type(n)可以用于匹配p元素选择器选择到的p元素指向的父元素中第n个类型为p的子元素,而且与p是否是该父元素的第n个子元素无关,比如
56 5
|
JavaScript 前端开发 API
【前端用法】jQuery在线引用地址(全)
【前端用法】jQuery在线引用地址(全)
1515 0
|
5月前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
60 1
|
2月前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
24 2
|
5月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
5月前
|
开发框架 JavaScript 前端开发
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
41 0
|
缓存 前端开发 JavaScript
【前端用法】jquery获取当前页面的URL信息
【前端用法】jquery获取当前页面的URL信息
85 0
|
6月前
|
JavaScript 程序员
让我们一起抄代码,JQuery 用法整理
让我们一起抄代码,JQuery 用法整理
52 0
|
存储 JavaScript 前端开发
【前端每日一问002】jquery中each与data方法的用法与概念
【前端每日一问002】jquery中each与data方法的用法与概念
|
JavaScript
jQuery $.makeArray()方法的用法
jQuery $.makeArray()方法的用法
258 0
jQuery  $.makeArray()方法的用法