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 相关文章推荐
跨浏览器的设置innerHTML方法
Sep 18 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
Dec 20 Javascript
node.js中的events.emitter.listeners方法使用说明
Dec 10 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 Javascript
在layui框架中select下拉框监听更改事件的例子
Sep 20 Javascript
javascript跳转与返回和刷新页面的实例代码
Nov 20 Javascript
Vue快速实现通用表单验证功能
Dec 05 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
坏狼的PHP学习教程之第1天
2008/06/15 PHP
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
php根据年月获取季度的方法
2014/03/31 PHP
php设计模式之委托模式
2016/02/13 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
js 操作符实例代码
2009/10/24 Javascript
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
jquery ajax abort()的使用方法
2010/10/28 Javascript
jquery 利用show和hidden实现级联菜单示例代码
2013/08/09 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
angular-cli修改端口号【angular2】
2017/04/19 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
2018/07/25 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python with的用法
2014/08/22 Python
详解Python中的序列化与反序列化的使用
2015/06/30 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
Python离线安装PIL 模块的方法
2019/01/08 Python
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
法人授权委托书
2014/04/03 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
学校四群教育实施方案
2014/06/12 职场文书
大学学生会辞职信
2015/05/13 职场文书
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python