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

  

 

posted @ 2013-05-15 15:30  GM_Lv  阅读(230)  评论(0编辑  收藏  举报