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实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
Javascript Function对象扩展之延时执行函数
Jul 06 Javascript
Jquery 获取checkbox的checked问题
Nov 16 Javascript
jquery图片不完全按比例自动缩小的简单代码
Jul 29 Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 Javascript
jQuery ajax serialize() 方法使用示例
Nov 02 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
Aug 20 Javascript
ES6中非常实用的新特性介绍
Mar 10 Javascript
bootstrap模态框远程示例代码分享
May 22 Javascript
详解如何在react中搭建d3力导向图
Jan 12 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 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常用图片处理类
2016/03/16 PHP
PHP实现的DES加密解密实例代码
2016/04/06 PHP
php实现文章置顶功能的方法
2016/10/20 PHP
PHP基于自定义函数生成笛卡尔积的方法示例
2017/09/30 PHP
PHP实现的mysql操作类【MySQL与MySQLi方式】
2017/10/07 PHP
优化网页之快速的呈现我们的网页
2007/06/29 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
javascript多行字符串的简单实现方式
2015/05/04 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
vue 使用class创建和清除水印的示例代码
2020/12/25 Vue.js
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
python实现对excel进行数据剔除操作实例
2017/12/07 Python
python 重命名轴索引的方法
2018/11/10 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
Python中@property的理解和使用示例
2019/06/11 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
Python改变对象的字符串显示的方法
2020/08/01 Python
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
几道数据库的概念性面试题
2014/05/30 面试题
2014年大班元旦活动方案
2014/02/26 职场文书
优秀党务工作者事迹材料
2014/05/07 职场文书
八荣八耻的活动方案
2014/08/16 职场文书
个人租房协议书样本
2014/10/01 职场文书
2014年司法所工作总结
2014/11/22 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
地道战观后感
2015/06/04 职场文书
python某漫画app逆向
2021/03/31 Python
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python
MutationObserver在页面水印实现起到的作用详解
2022/07/07 Javascript