这两个方法,一个是往里面添加队列,一个是执行队列 也是分静态方法和实例方法,

同样,实例方法最后调用静态方法 源码主要分析一下延迟delay方法,如何起作用的,写的有点仓促,先记录一下

在这里参照了网络上的文章,给推荐一下,介绍的很详细了,作者比较用心:

http://www.html-js.com/card/1083,他是基于1.7的,我这边运行的是1.9的,但是核心思想是一样的

  1. jQuery.extend({
  2. queue: function( elem, type, data ) {
  3. var queue;
  4.  
  5. if ( elem ) {
  6. type = ( type || "fx" ) + "queue";
  7. queue = jQuery._data( elem, type );
  8.  
  9. // Speed up dequeue by getting out quickly if this is just a lookup
  10. if ( data ) {
  11. if ( !queue || jQuery.isArray(data) ) {
  12. queue = jQuery._data( elem, type, jQuery.makeArray(data) );
  13. } else {
  14. queue.push( data );
  15. }
  16. }
  17. return queue || [];
  18. }
  19. },
  20.  
  21. dequeue: function( elem, type ) {
  22. type = type || "fx";
  23.  
  24. var queue = jQuery.queue( elem, type ),
  25. startLength = queue.length,
  26. fn = queue.shift(),
                  //取出钩子对象,如果存在直接从cache中取,没有的话,新存入一个,并返回
  27. hooks = jQuery._queueHooks( elem, type ),
                  //写死的next函数,调用next()意味着执行dequeue一次
  28. next = function() {
  29. jQuery.dequeue( elem, type );
  30. };
  31.  
  32. // If the fx queue is dequeued, always remove the progress sentinel
  33. if ( fn === "inprogress" ) {
  34. fn = queue.shift();
  35. startLength--;
  36. }
  37.  
  38. hooks.cur = fn;
  39. if ( fn ) {
  40.  
  41. // Add a progress sentinel to prevent the fx queue from being
  42. // automatically dequeued
  43. if ( type === "fx" ) {
  44. queue.unshift( "inprogress" );
  45. }
  46.  
  47. // clear up the last queue stop function
  48. delete hooks.stop;
                  //重点说一下这里,elem域调用fn(queue的第一个函数),同时传递next函数(jQuery.dequeue( elem, type ))以及hooks
                  //这个钩子对象平时没啥用就是清理key的时候调用empty返回的callback对象的fire方法,
                  //第二个作用就是用在延迟定义里面,大家可以看一下下面的源码,它把这个钩子对象又添加了一个stop函数,意味着,这个队列可以清除定时的设置,清除之后,后面的就不执行了
  49. fn.call( elem, next, hooks );
  50. }
  51.  
  52. if ( !startLength && hooks ) {
  53. hooks.empty.fire();
  54. }
  55. },
  56.  
  57. // not intended for public consumption - generates a queueHooks object, or returns the current one
  58. _queueHooks: function( elem, type ) {
  59. var key = type + "queueHooks";
  60. return jQuery._data( elem, key ) || jQuery._data( elem, key, {
                  //这里利用了callbacks对象的add方法,将来fire的时候可以直接把elem元素中的这些key清除掉
  61. empty: jQuery.Callbacks("once memory").add(function() {
  62. jQuery._removeData( elem, type + "queue" );
  63. jQuery._removeData( elem, key );
  64. })
  65. });
  66. }
  67. });
  68.  
  69. jQuery.fn.extend({
  70. queue: function( type, data ) {
  71. var setter = 2;
  72.           // 如果遇到这样的参数: $().queue( function(){} );

          // 则重置下参数

  1. if ( typeof type !== "string" ) {
  2. data = type;
  3. type = "fx";
  4. setter--;
  5. }
  6.  
  7. if ( arguments.length < setter ) {
  8. return jQuery.queue( this[0], type );
  9. }
  10.  
  11. return data === undefined ?
  12. this :
  13. this.each(function() {
  14. var queue = jQuery.queue( this, type, data );
  15.  
  16. // ensure a hooks for this queue
  17. jQuery._queueHooks( this, type );
  18.  
  19. if ( type === "fx" && queue[0] !== "inprogress" ) {
  20. jQuery.dequeue( this, type );
  21. }
  22. });
  23. },
  24. dequeue: function( type ) {
  25. return this.each(function() {
  26. jQuery.dequeue( this, type );
  27. });
  28. },
  29. // Based off of the plugin by Clint Helfers, with permission.
  30. // http://blindsignals.com/index.php/2009/07/jquery-delay/
  31. delay: function( time, type ) {
  32. time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time;
  33. type = type || "fx";
  34.  
  35. return this.queue( type, function( next, hooks ) {
  36. var timeout = setTimeout( next, time );
  37. hooks.stop = function() {
  38. clearTimeout( timeout );
  39. };
  40. });
  41. },
  42. clearQueue: function( type ) {
  43. return this.queue( type || "fx", [] );
  44. },
  45. // Get a promise resolved when queues of a certain type
  46. // are emptied (fx is the type by default)
  47. promise: function( type, obj ) {
  48. var tmp,
  49. count = 1,
  50. defer = jQuery.Deferred(),
  51. elements = this,
  52. i = this.length,
  53. resolve = function() {
  54. if ( !( --count ) ) {
  55. defer.resolveWith( elements, [ elements ] );
  56. }
  57. };
  58.  
  59. if ( typeof type !== "string" ) {
  60. obj = type;
  61. type = undefined;
  62. }
  63. type = type || "fx";
  64.  
  65. while( i-- ) {
  66. tmp = jQuery._data( elements[ i ], type + "queueHooks" );
  67. if ( tmp && tmp.empty ) {
  68. count++;
  69. tmp.empty.add( resolve );
  70. }
  71. }
  72. resolve();
  73. return defer.promise( obj );
  74. }
  75. });

下面引用网络上的一个例子,大家有兴趣可以运行一下,主要对delay的理解

  1. var obj = {};
  2. $.queue(obj, 'say', function(next) {
  3. document.write('hello ');
  4. next();
  5. });
  6. $.queue(obj, 'say', function() {
  7. document.write('world');
  8. });
  9. $.dequeue(obj, 'say');
  10. document.write("...............");
  11. var elem = {};
                  //这里没用链式表达式本意是debug用的,这里的function传参也是参照dequeue中的fn.call( elem, next, hooks );这样就可以连着调用2次queue了
  12. var e = $(elem).queue('handle', function(next) {
  13. document.write('first handle');
  14. next();
  15. });
  16. e.delay("1000", 'handle');
  17. e.queue('handle', function() {
  18. document.write('second handle');
  19. });
  20. e.dequeue('handle');
  21. /*
  22. *
  23. dequeue中有一段话
  24. var fn = queue.shift();
  25. if ( fn ) {
  26. delete hooks.stop;
  27. fn.call( elem, next, hooks );
  28. }
  29. 如果第一个函数是delay进去的函数的话,则赋予了elem.handleququeHooks.stop
  30. fn.call()这个函数把hooks传入,next原封不动,只是用setTimeout定时了
  31. var next = function() {
  32. jQuery.dequeue( elem, type );
  33. };
  34. delay: function( time, type ) {
  35. time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time;
  36. type = type || "fx";
  37.  
  38. return this.queue( type, function( next, hooks ) {
  39. var timeout = setTimeout( next, time );
  40. hooks.stop = function() {
  41. clearTimeout( timeout );
  42. };
  43. });
  44. }
  45. *
  46. *
  47. *
  48. *
  49. */
  50.  
  51. var stopFn = $._data(elem, "handlequeueHooks").stop;
  52. // function () { clearTimeout( timeout ); }
  53. console.log(stopFn);
  54. // 停止运行
  55. //stopFn();
  56. // 手动运行后续处理函数
  57. // 这里如果注释掉的话,第二个处理函数就不会执行,
  58. // 这里我们也看到了关于第二个参数: hooks 的使用方式。
  59. //$(elem).dequeue('handle');

  

queue(),dequeue()的更多相关文章

  1. js queue dequeue clearQueue stop

      一.queue( [queueName ], newQueue ) 操作欲执行队列方法 第一个参数是队列名称,不写的话默认是fx 第二个参数可以是一个函数数组,存放所有队列函数,也可以是一个回掉函 ...

  2. jQuery队列控制方法详解queue()/dequeue()/clearQueue()

    queue(name,[callback]):  当只传入一个参数时, 它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx);$('#demo').queue('name') 当有两 ...

  3. jQuery 第五章 实例方法 详解内置队列queue() dequeue() 方法

    .queue() .dequeue() .clearQueue() ------------------------------------------------------------------ ...

  4. hdu 1387(Team Queue) STL

    Team Queue Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  5. C# 集合类 :(Array、 Arraylist、List、Hashtable、Dictionary、Stack、Queue)

    我们用的比较多的非泛型集合类主要有 ArrayList类 和 HashTable类.我们经常用HashTable 来存储将要写入到数据库或者返回的信息,在这之间要不断的进行类型的转化,增加了系统装箱和 ...

  6. jQuery.queue源码分析

    作者:禅楼望月(http://www.cnblogs.com/yaoyinglong ) 队列是一种特殊的线性表,它的特殊之处在于他只允许在头部进行删除,在尾部进行插入.常用来表示先进先出的操作(FI ...

  7. jQuery源代码学习之七—队列模块queue

    一.jQuery种的队列模块 jQuery的队列模块主要是为动画模块EFFECTS提供支持,(不过到现在为了支持动画队列的inprogress的出入队还是搞不太清楚),单独抽取出一个命名空间是为了使程 ...

  8. Team Queue (uva540 队列模拟)

    Team Queue Queues and Priority Queues are data structures which are known to most computer scientist ...

  9. jquery源码学习之queue方法

    队列模块的代码结构 静态方法jQuery下有queue,dequeue,_queueHooks这三种方法:静态方法不建议直接在外部调用: 实例方法.queue,.dequeue,.clearQueue ...

随机推荐

  1. Struts2第四天

    Struts2第四天 昨天: 自定义的拦截器:继续methodFilterInterceptor,可以指定哪些方法需要拦截或者不拦截. Intercepters(配置拦截器),intercepter( ...

  2. hdu_5324_Boring Class(cdq分治+树状数组)

    题目链接:hdu_5324_Boring Class 题意: 给出n个二维点对,求LIS长度和编号字典序最小的LIS(x非增,y非减) 题解: dp[i]=max(dp[j]) (i>j,l[i ...

  3. submit 防止重复提交 --禁止提交

    <form action="/apply/apply" method="POST" id="indentForm"> <p ...

  4. Storm 集群安装配置

    本文详细介绍了 Storm 集群的安装配置方法.如果需要在 AWS 上安装 Storm,你应该看一下 storm-deploy 项目.storm-deploy 可以自动完成 E2 上 Storm 集群 ...

  5. HDU 1242 Rescue(BFS),ZOJ 1649

    题目链接 ZOJ链接 Problem Description Angel was caught by the MOLIGPY! He was put in prison by Moligpy. The ...

  6. BestCoder Round #86 A B C

    这次BC终于不像上次一样惨烈 终于A了三题…… 终测ing…… 发一波题解…… A.Price List A题十分无脑 只要把所有数加起来存到sum里 询问的时候大于sum输出1 否则输出0就行了…… ...

  7. css3的特效拓展...

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. ios 将彩色照片转化成黑白等几种类型

    -(UIImage *)changeColoursImageTograyScaleImage:(UIImage *)anImage type:(int)type { CGImageRef imageR ...

  9. grub引导centos

    下面来主要讲一下在grub下来引导centos: 其步骤如下; a   进入grub的命令模式. b  先熟悉一下grub  的一些命令 grub>help c  熟悉一下cat命令 d  ro ...

  10. Shell脚本中让进程休眠的方法(sleep用法)

    有时候写Shell的脚本,用于顺序执行一系列的程序. 有些程序在停止之后并没能立即退出,就例如有一个 tomcat 挂了,就算是用 kill -9 命令也还没瞬间就结束掉. 这么如果 shell 还没 ...