7-1 队列操作
本节编程练习不计算学习进度,请电脑登录imooc.com操作

队列操作

jQuery 中有一个 Queue 队列的接口,这个模块没有单独拿出来作为一个章节是因为这个是内部专门为动画服务的。Queue 队列如同 data 数据缓存与 Deferred 异步模型一样,都是 jQuery 库的内部实现的基础设施。

Queue队列

队列是一种特殊的线性表,只允许在表的前端(队头)进行删除操作(出队),在表的后端(队尾)进行插入操作(入队)。队列的特点是先进先出(FIFO-first in first out),即最先插入的元素最先被删除。

为什么要引入队列?

我们知道代码的执行流有异步与同步之分,例如:

var a = 1;
setTimeout(function(){
    a = 2;
},0)
alert(a) //1

我们一直习惯于“线性”地编写代码逻辑,但是在 JavaScript 编程几乎总是伴随着异步操作:

setTimeout、CSS3Transition/Animation、ajax、dom 的绘制、postmessage、Web Database 等等,大量异步操作所带来的回调函数会把我们的算法分解地支离破碎,之前我们说过对于“异步+回调”的模式,怎么“拉平”异步操作使之跟同步一样,因为异步操作进行流程控制的时候无非避免的要嵌套大量的回调逻辑,所以就会出现 promises 约定了。

那么 jQuery 引入队列其实从一个角度上可以认为:允许一系列函数被异步地调用而不会阻塞程序

看一个代码段:

$("#Aaron").slideUp().fadeIn()

这是 jQuery 的一组动画链式序列,它的内部其实就是一组队列 Queue,所以队列和 Deferred 地位类似,是一个内部使用的基础设施。

Queue 函数允许直接操作这个链式调用的行为,同时 Queue 可以指定队列名称获得其他能力而不局限于 fx 队列。

jQuery 提供了 2 组队列操作的 API:

jQuery.queue/dequeue
jQuery.fn.queue/dequeue

但是不同与普通队列定义的是:

任务

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
  5. <style>div { margin:3px; width:40px; height:40px;
  6. position:absolute; left:0px; top:30px;
  7. background:green; display:none; }
  8. div.newcolor { background:blue; }
  9. span { color:red; }
  10. </style>
  11. <script src="http://code.jquery.com/jquery-latest.js"></script>
  12. <title></title>
  13. </head>
  14. <body>
  15.  
  16. <span></span>
  17. <div></div>
  18.  
  19. <script type="text/javascript">
  20.  
  21. var div = $("div");
  22.  
  23. function runIt() {
  24. div.show("slow");
  25. div.animate({
  26. left: '+=200'
  27. }, 1000);
  28. div.slideToggle(500);
  29. div.slideToggle("fast");
  30. div.animate({
  31. left: '-=200'
  32. }, 1000);
  33. div.hide("slow");
  34. div.show(500);
  35. div.slideUp("normal", runIt);
  36. }
  37.  
  38. function showIt() {
  39. var n = div.queue("fx");
  40. $("span").text('通过queue取出正在运行队列的数量:'+n.length);
  41. setTimeout(showIt, 100);
  42. }
  43.  
  44. runIt();
  45. showIt();
  46.  
  47. </script>
  48. </body>
  49. </html>
下一节