zoukankan      html  css  js  c++  java
  • queue(),dequeue()

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

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

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

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

    jQuery.extend({
    	queue: function( elem, type, data ) {
    		var queue;
    
    		if ( elem ) {
    			type = ( type || "fx" ) + "queue";
    			queue = jQuery._data( elem, type );
    
    			// Speed up dequeue by getting out quickly if this is just a lookup
    			if ( data ) {
    				if ( !queue || jQuery.isArray(data) ) {
    					queue = jQuery._data( elem, type, jQuery.makeArray(data) );
    				} else {
    					queue.push( data );
    				}
    			}
    			return queue || [];
    		}
    	},
    
    	dequeue: function( elem, type ) {
    		type = type || "fx";
    
    		var queue = jQuery.queue( elem, type ),
    			startLength = queue.length,
    			fn = queue.shift(),
                  //取出钩子对象,如果存在直接从cache中取,没有的话,新存入一个,并返回 hooks = jQuery._queueHooks( elem, type ),
                  //写死的next函数,调用next()意味着执行dequeue一次 next = function() { jQuery.dequeue( elem, type ); }; // If the fx queue is dequeued, always remove the progress sentinel if ( fn === "inprogress" ) { fn = queue.shift(); startLength--; } hooks.cur = fn; if ( fn ) { // Add a progress sentinel to prevent the fx queue from being // automatically dequeued if ( type === "fx" ) { queue.unshift( "inprogress" ); } // clear up the last queue stop function delete hooks.stop;
                  //重点说一下这里,elem域调用fn(queue的第一个函数),同时传递next函数(jQuery.dequeue( elem, type ))以及hooks
                  //这个钩子对象平时没啥用就是清理key的时候调用empty返回的callback对象的fire方法,
                  //第二个作用就是用在延迟定义里面,大家可以看一下下面的源码,它把这个钩子对象又添加了一个stop函数,意味着,这个队列可以清除定时的设置,清除之后,后面的就不执行了 fn.call( elem, next, hooks ); } if ( !startLength && hooks ) { hooks.empty.fire(); } }, // not intended for public consumption - generates a queueHooks object, or returns the current one _queueHooks: function( elem, type ) { var key = type + "queueHooks"; return jQuery._data( elem, key ) || jQuery._data( elem, key, {
                  //这里利用了callbacks对象的add方法,将来fire的时候可以直接把elem元素中的这些key清除掉 empty: jQuery.Callbacks("once memory").add(function() { jQuery._removeData( elem, type + "queue" ); jQuery._removeData( elem, key ); }) }); } }); jQuery.fn.extend({ queue: function( type, data ) { var setter = 2;           // 如果遇到这样的参数: $().queue( function(){} );

              // 则重置下参数

    		if ( typeof type !== "string" ) {
    			data = type;
    			type = "fx";
    			setter--;
    		}
    
    		if ( arguments.length < setter ) {
    			return jQuery.queue( this[0], type );
    		}
    
    		return data === undefined ?
    			this :
    			this.each(function() {
    				var queue = jQuery.queue( this, type, data );
    
    				// ensure a hooks for this queue
    				jQuery._queueHooks( this, type );
    
    				if ( type === "fx" && queue[0] !== "inprogress" ) {
    					jQuery.dequeue( this, type );
    				}
    			});
    	},
    	dequeue: function( type ) {
    		return this.each(function() {
    			jQuery.dequeue( this, type );
    		});
    	},
    	// Based off of the plugin by Clint Helfers, with permission.
    	// http://blindsignals.com/index.php/2009/07/jquery-delay/
    	delay: function( time, type ) {
    		time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time;
    		type = type || "fx";
    
    		return this.queue( type, function( next, hooks ) {
    			var timeout = setTimeout( next, time );
    			hooks.stop = function() {
    				clearTimeout( timeout );
    			};
    		});
    	},
    	clearQueue: function( type ) {
    		return this.queue( type || "fx", [] );
    	},
    	// Get a promise resolved when queues of a certain type
    	// are emptied (fx is the type by default)
    	promise: function( type, obj ) {
    		var tmp,
    			count = 1,
    			defer = jQuery.Deferred(),
    			elements = this,
    			i = this.length,
    			resolve = function() {
    				if ( !( --count ) ) {
    					defer.resolveWith( elements, [ elements ] );
    				}
    			};
    
    		if ( typeof type !== "string" ) {
    			obj = type;
    			type = undefined;
    		}
    		type = type || "fx";
    
    		while( i-- ) {
    			tmp = jQuery._data( elements[ i ], type + "queueHooks" );
    			if ( tmp && tmp.empty ) {
    				count++;
    				tmp.empty.add( resolve );
    			}
    		}
    		resolve();
    		return defer.promise( obj );
    	}
    });
    

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

    var obj = {};
    			$.queue(obj, 'say', function(next) {
    				document.write('hello ');
    				next();
    			});
    			$.queue(obj, 'say', function() {
    				document.write('world');
    			});
    			$.dequeue(obj, 'say');
    			document.write("...............");
    			var elem = {};
                  //这里没用链式表达式本意是debug用的,这里的function传参也是参照dequeue中的fn.call( elem, next, hooks );这样就可以连着调用2次queue了 var e = $(elem).queue('handle', function(next) { document.write('first handle'); next(); }); e.delay("1000", 'handle'); e.queue('handle', function() { document.write('second handle'); }); e.dequeue('handle'); /* * dequeue中有一段话 var fn = queue.shift(); if ( fn ) { delete hooks.stop; fn.call( elem, next, hooks ); } 如果第一个函数是delay进去的函数的话,则赋予了elem.handleququeHooks.stop fn.call()这个函数把hooks传入,next原封不动,只是用setTimeout定时了 var next = function() { jQuery.dequeue( elem, type ); }; delay: function( time, type ) { time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time; type = type || "fx"; return this.queue( type, function( next, hooks ) { var timeout = setTimeout( next, time ); hooks.stop = function() { clearTimeout( timeout ); }; }); } * * * * */ var stopFn = $._data(elem, "handlequeueHooks").stop; // function () { clearTimeout( timeout ); } console.log(stopFn); // 停止运行 //stopFn(); // 手动运行后续处理函数 // 这里如果注释掉的话,第二个处理函数就不会执行, // 这里我们也看到了关于第二个参数: hooks 的使用方式。 //$(elem).dequeue('handle');

      

  • 相关阅读:
    cisco WLC开启portal认证,但是访问https无法跳转问题的解决
    Java完成生产者消费者模型
    struts2学习笔记之十四:使用注解配置Action(不是和spring集成使用)
    jstl引入报错
    Write operations are not allowed in read-only mode (FlushMode.MANUAL): Turn your Session into FlushMode.COMMIT/AUTO or remove 'readOnly' marker from transaction definition.
    PHOTOSHOP 制作虚线和实线
    Make和Makefile
    Linux启动级别
    硬链接和软链接
    深入分析LInux内核链表
  • 原文地址:https://www.cnblogs.com/aishangyizhihu/p/4249123.html
Copyright © 2011-2022 走看看