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 相关文章推荐
jCallout 轻松实现气泡提示功能
Sep 22 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 Javascript
Bootstrap基本样式学习笔记之标签(5)
Dec 07 Javascript
javascript算法之二叉搜索树的示例代码
Sep 12 Javascript
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 Javascript
taro开发微信小程序的实践
May 21 Javascript
Vue实现点击显示不同图片的效果
Aug 10 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 Javascript
d3.js 地铁轨道交通项目实战
Nov 27 Javascript
原生js实现拖拽移动与缩放效果
Aug 24 Javascript
vue界面发送表情的实现代码
Sep 11 Javascript
NestJs使用Mongoose对MongoDB操作的方法
Feb 22 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学习笔记(毕业设计)
2012/02/21 PHP
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
获取JavaScript异步函数的返回值
2016/12/21 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
JavaScript运动框架 链式运动到完美运动(五)
2017/05/18 Javascript
安装vue-cli报错 -4058 的解决方法
2017/10/19 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
2018/11/02 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
js在HTML的三种引用方式详解
2020/08/29 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
浅谈python字符串方法的简单使用
2016/07/18 Python
Django实现表单验证
2018/09/08 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
Pythony运维入门之Socket网络编程详解
2019/04/15 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
使用Python将字符串转换为格式化的日期时间字符串
2019/09/01 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
Python包和模块的分发详细介绍
2020/06/19 Python
Python 解析xml文件的示例
2020/09/29 Python
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
北京银河万佳Java面试题
2012/03/21 面试题
给学校的建议书
2014/03/12 职场文书
大班幼儿评语大全
2014/04/30 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
nginx内存池源码解析
2021/11/20 Servers