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单元测试框架QUnitjs详细介绍
May 08 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
jQuery实现商品活动倒计时
Oct 16 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
May 17 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
bootstrap多种样式进度条展示
Dec 20 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
JS对象与json字符串相互转换实现方法示例
Jun 14 Javascript
vue中nextTick用法实例
Sep 11 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
JavaScript类的继承多种实现方法
May 30 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
德生PL990,目前市面上唯一一款便携式插卡蓝牙全波段高性能收音机
2021/03/02 无线电
php+javascript的日历控件
2009/11/19 PHP
PHP中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
PHP session 会话处理函数
2016/06/06 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
jquery的Theme和Theme Switcher使用小结
2010/09/08 Javascript
js获取键盘按键响应事件(兼容各浏览器)
2013/05/16 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
2015/10/12 Javascript
基于jQuery实现滚动切换效果
2016/12/02 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
微信小程序websocket实现聊天功能
2020/03/30 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
Python3.5运算符操作实例详解
2019/04/25 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
Pytorch使用PIL和Numpy将单张图片转为Pytorch张量方式
2020/05/25 Python
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
个性大学生自我评价
2013/12/04 职场文书
大学生饮食连锁店创业计划书
2014/01/17 职场文书
个人银行贷款担保书
2014/04/01 职场文书
消防标语大全
2014/06/07 职场文书
团代会闭幕词
2015/01/28 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
开学典礼校长致辞
2015/07/29 职场文书
周末问候语大全
2015/11/10 职场文书