queue && dequeue
今天在做一个小东西的时候,用到了queue这个东西,代码如下:
$('.overlay').click(function(e){
$(this).addClass('up').delay(600).queue(function(){
$(this).hide().removeClass('up');
$(this).dequeue();
});
});
应该是很好理解的,接着找了下他们的用法,参考别人的思路写了个小小的模拟测试:
var myQueue=function(fnArr){
//将队列放入fnArr
this.fnArr=fnArr||[];
};
myQueue.prototype={
fnArr:[],
queue:function(fn) {
//如果是函数数组,则依次放入
if (fn[0]) {
for (var i=0; fn[i];this.fnArr.push(fn[i++])){}
} else {
this.fnArr.push(fn);
}
},
dequeue:function() {
//弹出剩余的第一个函数并执行
(this.fnArr.shift()||function(){})();
},
clear:function() {
this.fnArr=[];
}
};
var test=document.getElementById("test");
//创建一个实例
var foo=new myQueue([
function() {test.innerHTML+=9;setTimeout("foo.dequeue()",1000);},
function() {test.innerHTML+=8;setTimeout("foo.dequeue()",1000);},
function() {test.innerHTML+=7;setTimeout("foo.dequeue()",1000);},
function() {test.innerHTML+=6;setTimeout("foo.dequeue()",1000);},
function() {test.innerHTML+=5;setTimeout("foo.dequeue()",1000);},
function() {test.innerHTML+=4;setTimeout("foo.dequeue()",1000);},
function() {test.innerHTML+=3;setTimeout("foo.dequeue()",1000);}
]);
//添加一组函数
foo.queue([
function() {
test.innerHTML+=2;
setTimeout("foo.dequeue()",1000);
},
function() {
test.innerHTML+=1;
setTimeout("foo.dequeue()",1000);
}
]);
//添加一个函数
foo.queue(function() {
test.innerHTML+="结束";
setTimeout("foo.dequeue()",1000);
});
//点击页面清空队列
document.onclick=function() {
foo.clear();
}
//执行队列中第一个函数
foo.dequeue();

浙公网安备 33010602011771号