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();