您的位置：首页 > Web前端 > JavaScript

javascript队列执行池类初探

2015-05-15 10:54 393 查看

javascript队列执行池类初探

在业务逻辑中，有时会遇到这样的逻辑，需要按一定的顺序执行一系列方法，而这一系列方法的个数不确定，执行时间是必须等上一个方法执行完，有时需要取消队列中还没有执行的方法，有时需要暂停队列执行，这样功能的一个类如果用javascript实现，我给起个名字叫：javascript队列执行池。

思路:

用一个数组保存要执行的function,定期检查数组,如果有function,按顺序执行每一个function,执行过程中可以通过状态控制执行是否停止.

代码:

<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="dis"></div>
<div id="play" style="cursor: pointer">开始</div>
<script>
function ExecutePool() {//执行池类
this.executeState = false;//执行状态
this.fnContainer = []; //池容器
var _this = this; //保存this对象

this.addFn = function (fnobj) { //向池里添加方法
_this.fnContainer.push(fnobj);
}

this.reset = function () { //重置
_this.this.fnContainer = [];
_this.executeState = false;
}

this.pause = function () {//暂停
if (_this.executeState) {
_this.executeState = false;
}
}

this.start = function (wt) {//执行 wt:两方法执行间隔时间（毫秒）
_this.executeState = true;
(function () {
if (_this.executeState) {
if (_this.fnContainer.length > 0) {
_this.fnContainer[0]();
_this.fnContainer.shift();
}
window.setTimeout(arguments.callee, (wt || 50));
}
})();
}

}

//测试 1，添加两个方法 2，暂停 3，添加一个方法 4，执行
var xcs = new ExecutePool();
xcs.addFn(function () {
document.getElementById("dis").innerHTML = "aaa";
});
xcs.addFn(
function () {
document.getElementById("dis").innerHTML = "ddd";
});
xcs.start(1000);
xcs.pause();
xcs.addFn(function () {
document.getElementById("dis").innerHTML = '结束';
});

document.getElementById("play").onclick = function () {
xcs.start(1000);
}
</script>
</body>
</html>


后记:

1,动画js库可以用这种模式,使用户不必关心怎么样执行,只改变状态,就自动执行.

2,在添加的方法中如果调用setTimeout方法,顺序会错乱.

3,这是我初步想法,以后完善,如有好的建议给我私信.
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript markdown
相关文章推荐
新的分享
章节导航