queue(),dequeue()

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

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

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
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(),<br>　　　　　　　　　　　　　　//取出钩子对象，如果存在直接从cache中取，没有的话，新存入一个，并返回
            hooks = jQuery._queueHooks( elem, type ),<br>　　　　　　　　　　　　　　//写死的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;<br>　　　　　　　　　　　　　　//重点说一下这里，elem域调用fn（queue的第一个函数）,同时传递next函数（jQuery.dequeue( elem, type )）以及hooks<br>　　　　　　　　　　　　　　//这个钩子对象平时没啥用就是清理key的时候调用empty返回的callback对象的fire方法，<br>　　　　　　　　　　　　　　//第二个作用就是用在延迟定义里面，大家可以看一下下面的源码，它把这个钩子对象又添加了一个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, {<br>　　　　　　　　　　　　　　//这里利用了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的理解

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
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 = {};<br>　　　　　　　　　　　　　　//这里没用链式表达式本意是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');

　　

posted @   小An  阅读(1635)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示