队列是只允许在一端进行插入操作，另一个进行删除操作的线性表，队列是一种先进先出（First-In-First-Out，FIFO）的数据结构
队列在程序程序设计中用的非常的频繁，因为javascript单线程，所以导致了任何一个时间段只能执行一个任务，而且还参杂了异步的机制，
那么带来的问题：
1. 在异步操作执行的时候，同步代码还在继续，那么同步代码依赖异步，自然就会出错
2. 多个同步的任务在不同的时间段被调用
jQuery的动画中，我们经常写一段连续的动画代码
|
1
2
3
4
5
6
7
|
$book.animate({ opacity:
0.25,}).animate({ opacity:
0.5}).animate({ opacity:
1}) |
给我们的直观感觉就是：第一个animate结束后元素的opacity变成0.25，然后开始继续执行第二个animate，元素的opacity变成0.5, 之后类推。但是实际上来说这里就设计了一个本质的问题，动画可是异步调用的，animate方法是同步在执行的，所以这里就需要设计到队列，jQuery也给出了一个专门为动画设计的queue方法
队列本来也是一种特殊的线性表，在JavaScript我们可以直接使用数组实现这样的一个设计，数组的push()方法可以在数组末尾加入元素，shift()方法则可删除数组的第一个元素。
|
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
|
function
Queue() { this.dataStore
= []; this.enqueue
= enqueue; this.dequeue
= dequeue; this.first
= first; this.end
= end; this.toString
= toString; this.empty
= empty;}/////////////////////////////
enqueue()方法向队尾添加一个元素： /////////////////////////////function
enqueue(element) { this.dataStore.push(element);}///////////////////////////
dequeue()方法删除队首的元素： ///////////////////////////function
dequeue() { return
this.dataStore.shift();}///////////////////////////
可以使用如下方法读取队首和队尾的元素： ///////////////////////////function
first() { return
this.dataStore[0];}function
end() { return
this.dataStore[this.dataStore.length
- 1];} |
|
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
|
///////////////////////////////
toString()方法显示队列内的所有元素 ///////////////////////////////function
toString() { var
retStr = ""; for
(var
i = 0; i < this.dataStore.length;
++i) { retStr
+= this.dataStore[i]
+ "\n"; } return
retStr;}//////////////////////////
需要一个方法判断队列是否为空 //////////////////////////function
empty() { if
(this.dataStore.length
== 0) { return
true; }
else
{ return
false; }}var
q = new
Queue();q.enqueue("Aaron1");q.enqueue("Aaron2");q.enqueue("Aaron3");console.log("队列头:
"
+ q.first()); //("Aaron1");console.log("队列尾:
"
+ q.end()); //("Aaron3"); |
队列采用的是线性的存储，那么就存在着顺序储存的一些弊端，比如排队买票，如果第一个买好了，后面的就会自然的往前移动一个空位，这样涉及到整个队列的每一个成员都要往前移动，不过JavaScript的队列是用数组描述的，底层解决了些弊端了。当然还有查找算法上的问题，比如可以用数组实现单链表结构等等，我们这里只讨论javascript的队列
模拟jQuery，使用队列实现一个动画
|
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
|
<div
id="div1"
style="width:100px;height:50px;background:red;cursor:pointer;color:#fff;text-align:center;line-height:50px;">点击</div>(function($)
{ window.$
= $;})(function()
{ var
rquickExpr = /^(?:#([\w-]*))$/; function
aQuery(selector) { return
new
aQuery.fn.init(selector); } /** *
动画 *
@return {[type]} [description] */ var
animation = function()
{ var
self = {}; var
Queue = []; //动画队列 var
fireing = false
//动画锁 var
first = true;
//通过add接口触发 var
getStyle = function(obj,
attr) { return
obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr]; } var
makeAnim = function(element,
options, func) { var
width = options.width //包装了具体的执行算法 //css3 //setTimeout element.style.webkitTransitionDuration
= '2000ms'; element.style.webkitTransform
= 'translate3d('
+ width + 'px,0,0)'; //监听动画完结 element.addEventListener('webkitTransitionEnd',
function()
{ func() }); } var
_fire = function()
{ //加入动画正在触发 if
(!fireing) { var
onceRun = Queue.shift(); if
(onceRun) { fireing
= true; //next onceRun(function()
{ fireing
= false; _fire(); }); }
else
{ fireing
= true; } } } return
self = { //增加队列 add:
function(element,
options) { Queue.push(function(func)
{ makeAnim(element,
options, func); }); //如果有一个队列立刻触发动画 if
(first && Queue.length) { first
= false; self.fire(); } }, //触发 fire:
function()
{ _fire(); } } }(); aQuery.fn
= aQuery.prototype = { run:
function(options)
{ animation.add(this.element,
options); return
this; } } var
init = aQuery.fn.init = function(selector)
{ var
match = rquickExpr.exec(selector); var
element = document.getElementById(match[1]) this.element
= element; return
this; } init.prototype
= aQuery.fn; return
aQuery;}());//domvar
oDiv = document.getElementById('div1');//调用oDiv.onclick
= function()
{ $('#div1').run({ 'width':
'500' }).run({ 'width':
'300' }).run({ 'width':
'1000' });}; |
测试
|
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
|
<!doctype
html><div id="div1"
style="width:100px;height:50px;background:red;cursor:pointer;color:#fff;text-align:center;line-height:50px;"
data-mce-style="width:
100px; height: 50px; background: red; cursor: pointer; color: #fff; text-align: center; line-height: 50px;">点击</div><script
type="text/javascript">(function($)
{ window.$
= $;})(function()
{ var
rquickExpr = /^(?:#([\w-]*))$/; function
aQuery(selector) { return
new
aQuery.fn.init(selector); } /** *
动画 *
@return {[type]} [description] */ var
animation = function()
{ var
self = {}; var
Queue = []; //动画队列 var
fireing = false
//动画锁 var
first = true;
//通过add接口触发 var
getStyle = function(obj,
attr) { return
obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr]; } var
makeAnim = function(element,
options, func) { var
width = options.width //包装了具体的执行算法 //css3 //setTimeout element.style.webkitTransitionDuration
= '2000ms'; element.style.webkitTransform
= 'translate3d('
+ width + 'px,0,0)'; //监听动画完结 element.addEventListener('webkitTransitionEnd',
function()
{ func() }); } var
_fire = function()
{ //加入动画正在触发 if
(!fireing) { var
onceRun = Queue.shift(); if
(onceRun) { fireing
= true; //next onceRun(function()
{ fireing
= false; _fire(); }); }
else
{ fireing
= true; } } } return
self = { //增加队列 add:
function(element,
options) { Queue.push(function(func)
{ makeAnim(element,
options, func); }); //如果有一个队列立刻触发动画 if
(first && Queue.length) { first
= false; self.fire(); } }, //触发 fire:
function()
{ _fire(); } } }(); aQuery.fn
= aQuery.prototype = { run:
function(options)
{ animation.add(this.element,
options); return
this; } } var
init = aQuery.fn.init = function(selector)
{ var
match = rquickExpr.exec(selector); var
element = document.getElementById(match[1]) this.element
= element; return
this; } init.prototype
= aQuery.fn; return
aQuery;}());//domvar
oDiv = document.getElementById('div1');//调用oDiv.onclick
= function()
{ $('#div1').run({ 'width':
'500' }).run({ 'width':
'300' }).run({ 'width':
'1000' });};</script> |
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
