The uses of jQuery .queue() and .dequeue()
Queues in jQuery are used for animations. You can use them for any purpose you
like. They are an array of functions stored on a per element basis, using
jQuery.data()
. The are First-In-First-Out (FIFO). You can add a function to the
queue by calling .queue()
, and you remove (by calling) the functions using
.dequeue()
.
To understand the internal jQuery queue functions, reading the source and
looking at examples helps me out tremendously. One of the best examples of a
queue function I’ve seen is .delay()
:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
|
The default queue – fx
The default queue in jQuery is fx. The default queue has some special properties that are not shared with other queues.
- Auto Start: When calling
$(elem).queue(function() {});
the fx queue will automatically dequeue the next function and run it if the queue hasn’t started. - ‘inprogress’ sentinel: Whenever you
dequeue()
a function from the fx queue, it willunshift()
(push into the first location of the array) the string "inprogress" – which flags that the queue is currently being run. - It’s the default! The fx queue is used by
.animate()
and all functions that call it by default.
.dequeue()
the functions, they will not auto start!Retrieving/Setting the queue
You can retrieve a reference to a jQuery queue by calling .queue()
without a
function argument. You can use the method if you want to see how many items are
in the queue. You can use push, pop, unshift, shift to manipulate the queue in
place. You can replace the entire queue by passing an array to the .queue()
function.
Quick Examples:
1
2
3
4
5
6
7
8
9
10
11
|
|
An animation (fx) queue example:
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
|
|
Queueing something like Ajax Calls:
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
|
|
Another custom queue example
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
|
|