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 相关文章推荐
FireFox下XML对象转化成字符串的解决方法
Dec 09 Javascript
Javascript中的String对象详谈
Mar 03 Javascript
JQuery中$(document)是什么意思有什么作用
Jul 21 Javascript
JS组件Bootstrap Select2使用方法解析
May 30 Javascript
Jquery实现上下移动和排序代码
Oct 17 Javascript
Bootstrap路径导航与分页学习使用
Feb 08 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
JavaScript中this的学习笔记及用法整理
Feb 17 Javascript
vue实现自定义多选按钮
Jul 16 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
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设计模式 php实现命令模式(command)
2015/12/08 PHP
PHP的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
19个很有用的 JavaScript库推荐
2011/06/27 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
javascript实现炫酷的拖动分页
2015/05/11 Javascript
JS实现从网页顶部掉下弹出层效果的方法
2015/08/06 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
Vue.js第二天学习笔记(vue-router)
2016/12/01 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
python绘制简单折线图代码示例
2017/12/19 Python
Pycharm更换python解释器的方法
2018/10/29 Python
浅谈Python编程中3个常用的数据结构和算法
2019/04/30 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
北京振戎融通Java面试题
2015/09/03 面试题
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
本科生职业生涯规划书范文
2014/01/21 职场文书
房屋租赁协议书
2014/04/10 职场文书
预防艾滋病宣传标语
2014/06/25 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
消防隐患整改通知书
2015/04/22 职场文书
给朋友的赠语
2015/06/23 职场文书