jquery队列queue与原生模仿其实现方法分享


Posted in Javascript onMarch 25, 2014

queue() 方法显示或操作在匹配元素上执行的函数队列。

queue和dequeue的过程主要是:

用queue把函数加入队列(通常是函数数组)
用dequeue将函数数组中的第一个函数取出,并执行(用shift()方法取出并执行)
也就意味着当再次执行dequeue的时候,得到的是另一个函数了。同时也意味着,如果不执行dequeue,那么队列中的下一个函数永远不会执行。

对于一个元素上执行animate方法加动画,jQuery内部也会将其加入名为 fx 的函数队列。而对于多个元素要依次执行动画,则必须我们手动设置队列进行了。

一个例子,要两个div依次向左移动:

<div id="block1">div 1</div>
<div id="block2">div 2</div>
<script type="text/javascript">
 var FUNC=[
  function() {$("#block1").animate({color:"=blue"},aniCB);},
  function() {$("#block2").animate({color:"=red"},aniCB);},
  function() {$("#block1").animate({color:"=yellow"},aniCB);},
  function() {$("#block2").animate({color:"=grey"},aniCB);},
  function() {$("#block1").animate({color:"=green"},aniCB);},
  function(){alert("动画结束")}
 ];
 var aniCB=function() {
  $(document).dequeue("myAnimation");
 }
 $(document).queue("myAnimation",FUNC)
 //aniCB();
</script>

我首先建立了一个函数数组,里边是一些列需要依次执行的动画
然后我定义了一个回调函数,用dequeue方法用来执行队列中的下一个函数
接着把这个函数数组放到document上的myAnimation的队列中(可以选择任何元素,我只是为了方便而把这个队列放在document上)
最后我开始执行队列中的第一个函数
这样做的好处在于函数数组是线性展开,增减起来非常方便。而且,当不要要继续进行接下来动画的时候(比如用户点了某个按钮),只需要清空那个队列即可。而要增加更多则只需要加入队列即可。

//清空队列
$(document).queue("myAnimation",[]);
//加一个新的函数放在最后
$(document).queue(“myAnimation”,function(){alert("动画真的结束了!")});

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

jQuery中动画animate的队列实现,下面用JavaScript模仿一个:

function Queue(){
 this.a = [];
 this.t = null;
}
Queue.prototype = {
 queue:function(s){
  var self = this;
  this.a.push(s);
  this.hold();
  return this;
 },
 hold:function(){
  var self = this;
  clearTimeout(this.t);
  this.t = setTimeout(function(){
   console.log("Queue start! ",self.a);
   self.dequeue();
  },0);
 },
 dequeue:function(){
  var s = this.a.shift(),self = this;
  if(s){
   console.log("s:"+s);
   setTimeout(function(){
    console.log("end:"+s);
    self.dequeue();
   },s);
  }
 }
};
var a = new Queue().queue(500).queue(200).queue(400).queue(1500).queue(300).queue(2000);
Javascript 相关文章推荐
javascript DOM编程实例(智播客学习)
Nov 23 Javascript
Jquery 最近浏览过的商品的功能实现代码
May 14 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
Nov 08 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
Nov 13 Javascript
jquery ajax,ashx,json的用法总结
Feb 12 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
Aug 31 Javascript
详解javascript事件冒泡
Jan 09 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 Javascript
r.js来合并压缩css文件的示例
Apr 26 Javascript
Vue中的v-for循环key属性注意事项小结
Aug 12 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 Javascript
JavaScript箭头函数中的this详解
Jun 19 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
Mar 25 #Javascript
jquery的each方法使用示例分享
Mar 25 #Javascript
提取jquery的ready()方法单独使用示例
Mar 25 #Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 #Javascript
jquery解析xml字符串示例分享
Mar 25 #Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 #Javascript
jquery选择器原理介绍($()使用方法)
Mar 25 #Javascript
You might like
第十五节--Zend引擎的发展
2006/11/16 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
php绘图之生成饼状图的方法
2015/01/24 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
一个小型js框架myJSFrame附API使用帮助
2008/06/28 Javascript
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
2014/01/27 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
2015/05/28 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
详述JavaScript实现继承的几种方式(推荐)
2016/03/22 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
python实现批量转换文件编码(批转换编码示例)
2014/01/23 Python
Python列表(list)、字典(dict)、字符串(string)基本操作小结
2014/11/28 Python
Python2中的raw_input() 与 input()
2015/06/12 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
在tensorflow中实现去除不足一个batch的数据
2020/01/20 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
HTML5 File API改善网页上传功能
2009/08/19 HTML / CSS
目标管理责任书
2014/04/15 职场文书
幼儿园课题方案
2014/06/09 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
女方离婚起诉书
2015/05/18 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书
Python基础之字符串格式化详解
2021/04/21 Python