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 相关文章推荐
js+css实现的简单易用兼容好的分页
Dec 30 Javascript
javascript获取web应用根目录的方法
Feb 12 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
javascript事件模型介绍
May 31 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
详解javascript事件绑定使用方法
Oct 20 Javascript
jquery select2的使用心得(推荐)
Dec 04 Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 Javascript
在Js页面通过POST传递参数跳转到新页面详解
Aug 25 Javascript
layui使用数据表格实现购物车功能
Jul 26 Javascript
详解js中的原型,原型对象,原型链
Jul 16 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 PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
js实现简单模态窗口,背景灰显
2008/11/14 Javascript
json2.js的初步学习与了解
2011/10/06 Javascript
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
JavaScript中的substr()方法使用详解
2015/06/06 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
2017/05/05 jQuery
详解Vue用axios发送post请求自动set cookie
2017/05/10 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
关于vue.js组件数据流的问题
2017/07/26 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
Python ftp上传文件
2016/02/13 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
python文本数据处理学习笔记详解
2019/06/17 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
教你打造完美的创业计划书
2014/01/06 职场文书
超市开学活动方案
2014/03/01 职场文书
企业精神口号
2014/06/11 职场文书
研究生求职自荐书
2014/06/23 职场文书
就业意向协议书
2015/01/29 职场文书
Ruby使用Mysql2连接操作MySQL
2022/04/19 Ruby
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android