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脚本的性能的几个注意事项
Dec 22 Javascript
在JavaScript中typeof的用途介绍
Apr 11 Javascript
给应用部分的js代码设定一个统一的入口
Jun 15 Javascript
jQuery实现的一个自定义Placeholder属性插件
Aug 11 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
node.js 和HTML5开发本地桌面应用程序
Dec 13 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
Mar 13 Javascript
微信小程序通过保存图片分享到朋友圈功能
May 24 Javascript
layer弹出层自定义提交取消按钮的例子
Sep 10 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
Jan 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
PHP如何抛出异常处理错误
2011/03/02 PHP
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
php输入数据统一类实例
2015/02/23 PHP
Linux系统递归生成目录中文件的md5的方法
2015/06/29 PHP
JS 面向对象之神奇的prototype
2011/02/26 Javascript
了解一点js的Eval函数
2012/07/26 Javascript
CheckBoxList多选样式jquery、C#获取选择项
2013/09/06 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
2014/08/22 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
JavaScript深度复制(deep clone)的实现方法
2016/02/19 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
Vue页面骨架屏的实现方法
2018/05/22 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
python获取指定时间差的时间实例详解
2017/04/11 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
在django view中给form传入参数的例子
2019/07/19 Python
如何使用django的MTV开发模式返回一个网页
2019/07/22 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
详解django中Template语言
2020/02/22 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
HTML5+css3:3D旋转木马效果相册
2017/01/03 HTML / CSS
性能测试工程师的面试题
2015/02/20 面试题
法学毕业生自荐信
2013/11/13 职场文书
大学生职业生涯设计书
2014/01/02 职场文书
董事长助理岗位职责
2014/02/18 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书