Skip to content
On this page

延迟执行 ​

这是个很有意思的编程思想,如果拿出来做为题目,很多中高级工程师也很难短时间想明白

使用 ​

js
jQuery.fn.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 = window.setTimeout(next, time);
    hooks.stop = function () {
      window.clearTimeout(timeout);
    };
  });
};

当我看到这种用法的时候,我就在想,是不是我想的那个原理,果然读到下面的源码,和我的想法差不多

原理 ​

js
queue: function( elem, type, data ) {
		var queue;

		if ( elem ) {
			type = ( type || "fx" ) + "queue";
			queue = dataPriv.get( elem, type );

			// Speed up dequeue by getting out quickly if this is just a lookup
			if ( data ) {
				if ( !queue || Array.isArray( data ) ) {
					queue = dataPriv.access( 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(),
			hooks = jQuery._queueHooks( elem, type ),
			next = function() {
				jQuery.dequeue( elem, type );
			};

		// If the fx queue is dequeued, always remove the progress sentinel
		if ( fn === "inprogress" ) {
			fn = queue.shift();
			startLength--;
		}

		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;
			fn.call( elem, next, hooks );
		}

		if ( !startLength && hooks ) {
			hooks.empty.fire();
		}
	},