控制函数队列

前一篇文章中探讨了关于jQuey中队列控制的两个函数 queue 和 dequeue,这两个极大方便了我们编写一些有时间差、并非立即执行完毕,却对次序要求很高的代码。

这里我再发布一个自己编写的处理队列的代码
注:这里的代码行为与jQuey的代码行为不完全一样!

测试页面: http://shawphy.com/lab/myqueue.html


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=[];
}
};

用法:
用new 创建一个实例:
var foo=new myQueue()
或者带一个函数数组:


var foo=new myQueue([
function() {
test.innerHTML+=1;
setTimeout(“foo.dequeue()”,1000);
},
function() {
test.innerHTML+=2;
setTimeout(“foo.dequeue()”,1000);
}
]);

还可以再添加一组或者一个函数


foo.queue([
function() {
test.innerHTML+=3;
setTimeout(“foo.dequeue()”,1000);
},
function() {
test.innerHTML+=4;
setTimeout(“foo.dequeue()”,1000);
}
]);

foo.queue(function() {
test.innerHTML+=5;
setTimeout(“foo.dequeue()”,1000);
});

开始执行当前队列中的第一个函数:

foo.dequeue();

清空队列:
foo.clear();

《控制函数队列》有5个想法

  1. 发现一个有趣的问题,如果队列在执行中,IE8中点击右键,这个脚本会停止,无论我右键的菜单停留了多长时间.其他浏览器还没测试,估计应该是settimeout的本质问题了

    1. 很可能ie8把右键点击也认为是触发click事件了
      我测试下来,ie6和chrome是不会停止的,firefox 3是会停止脚本的。

  2. 你的代码中这个地方的判断fn是否为数组是不可靠的
    if(fn[0]){…do some thing}
    例如:
    var a = {};
    a[0] = 1;
    alert(Object.prototype.toString.call(a));
    alert(a[0]);

    1. 您说的太对了。但是,此处判断fn是否为数组是为了区分加入的是一个函数,还是一组函数。使用这段代码的程序员在明知这里只能传入一个函数或者一个函数数组的情况下,却偏偏要恶意的传入一个刻意构造的对象,这不是自己找刺激嘛 :)

发表评论