jQ的队列管理【后篇】
发布在# 菜鸟解读 jQuery #2014年5月16日view:3267
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

承接上文
本篇我们先来看代码,随后在做一些解释

jQuery.fn.extend({
    //函数入队,返回队列
    queue: function( type, data ) {
        var setter = 2;
        // 如果遇到这样的参数: $().queue( function(){} ); 
        // 则重置下参数
        if ( typeof type !== "string" ) {
            data = type;
            type = "fx";
            setter--;
        }
        // 如果不传入data && type是字符串
        // 返回对应的事件队列
        if ( arguments.length < setter ) {
            return jQuery.queue( this[0], type );
        }
        return data === undefined ?
            this :
            //这里的是this指的是jQ对象,是一个类似数组的对象,each是遍历操作
            this.each(function() {

                //为每个对象添加事件到队列中
                //这里的this指的是遍历时的每个元素,然后为其添加事件函数
                var queue = jQuery.queue( this, type, data );

                //如果队列顶部不是占位符且type是fx则调用出战
                //这里运动的情况,如果没有动画函数正在执行,则立刻出队并执行动画函数
                //这里看起来是不是有点像callbacks的memory模式呢~? add的同时被fireWidth
                //请忽略阅读
                if ( type === "fx" && queue[0] !== "inprogress" ) {
                    jQuery.dequeue( this, type );
                }
            });
    },
    //函数出队,并执行
    dequeue: function( type ) {
        //这个, 就是对每个元素进行一次遍历
        return this.each(function() {
            jQuery.dequeue( this, type );
        });
    },
    //设置延迟出队
    delay: function( time, type ) {
        // jQuery.fx.speeds : {slow: 600, fast: 200, _default: 400} 
        time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time;
        type = type || "fx";
        //本质就是追加一个函数到队列中,这个函数的作用是延时后触发下一个函数
        //可以理解为这是一个过渡函数
        return this.queue( type, function( next, hooks ) {
            //这里执行了延时调度
            var timeout = setTimeout( next, time );
            //设置一个参数,这个参数会被吸附在 type+".run" 变量上
            //可以使用 $._data(elem,type+".run"); 进行获取然后执行,
            //执行的效果自然是截断这个定时器,不过也可以通过手动方式继续执行后续函数
            hooks.stop = function() {
                clearTimeout( timeout );
            };
        });
    },
    //清空队列
    clearQueue: function( type ) {
        return this.queue( type || "fx", [] );
    },
    //..
});

下面小编来举个栗子来看下hooks的使用方法

var elem = {};
$(elem).
    queue('handle',function(next){
        console.log('first handle');
        next();
    }).
    delay('fast','handle').
    queue('handle',function(){
        console.log('second handle');
    }).
    dequeue('handle');


var stopFn = $._data(elem,'handle.run').stop;
// function () { clearTimeout( timeout ); }
console.log( stopFn );
// 停止运行
stopFn();
// 手动运行后续处理函数
// 这里如果注释掉的话,第二个处理函数就不会执行,
// 这里我们也看到了关于第二个参数: hooks 的使用方式。
$(elem).dequeue('handle');

本篇结束完毕,小编少介绍了几个api:

function handleQueueMarkDefer(){}
jQuery.extend({
    _mark: function(){},
    _unmark: function(){},
});
jQuery.fn.extend({
    promise: function(){}
});

这几个函数也是队列代码这块,但是和我们使用的queue和dequeue没有什么关系,
所以小编在这里不打算介绍【其实小编也不知道干嘛用的】,但是找了下在动画api附近出现了调用,
这样干将代码也没啥意思,等到小编看到动画api是再回头来介绍,能力有限, 还请尽量。

感谢您的阅读,欢迎留言:提问,交流,扶正

评论
发表评论
暂无评论
WRITTEN BY
前端狮子
JS前端开发工程师 :喜欢研究js,nodejs,html5; 希望结交更多朋友~
TA的新浪微博
PUBLISHED IN
# 菜鸟解读 jQuery #

本栏解读的jQ为1.7.2版本。 本人也是刚开始读起源码,在这里分享下成长的心得。 本人能力有限,也是接触JS不久的初学者,定会有不少解析不全不够明朗【甚至BUG】的地方, 希望各位牛牛多多留言斧正 感谢阅读 ps:由于工作不定时繁忙,本人也无法定期更新,但是会尽量抽时间学习,分享给大家

我的收藏