javascript队列执行池类初探

谁践踏了优雅 2022-08-08 11:48 104阅读 0赞

## 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,这是我初步想法,以后完善,如有好的建议给我私信.