JavaScript-taskRunner

从gaia看到的有意思的东西--任务队列，做一下简易封装

1. 创建实例，push进异步函数，检测顺序执行

"use strict"

function TaskRunner() {
    this._currentTask = Promise.resolve();
}

TaskRunner.prototype.push = function (task) {
    console.log(this._currentTask);
  return (this._currentTask = this._currentTask.then(task, task));
}

var runner = new TaskRunner();


runner.push(function(){return new Promise(resolve => setTimeout(() => {console.log(1000);resolve()}, 1000))});
runner.push(function(){return new Promise(resolve => setTimeout(() => {console.log(1000);resolve()}, 1000))});
runner.push(function(){return new Promise(resolve => setTimeout(() => {console.log(1000);resolve()}, 1000))});

结果：

Promise { undefined }
Promise { <pending> }
Promise { <pending> }
1000 // 过了1000ms
1000 // 过了2000ms
1000 // 过了3000ms

2. 设置一个启动函数

"use strict"

function TaskRunner() {
    this.currentTask = Promise.resolve();
  this._currentTask = [];
}

TaskRunner.prototype.push = function (task) {
    this._currentTask.push(task);
}

TaskRunner.prototype.run = function (task) {
    return (this.currentTask = this.currentTask.then(task, task));
}

TaskRunner.prototype.start = function () {
    this._currentTask.forEach(task => {
        this.run(task);
    })
}

var runner = new TaskRunner();

runner.push(function(){return new Promise(resolve => setTimeout(() => {console.log(1000);resolve()}, 1000))});
runner.push(function(){return new Promise(resolve => setTimeout(() => {console.log(1000);resolve()}, 1000))});
runner.push(function(){return new Promise(resolve => setTimeout(() => {console.log(1000);resolve()}, 1000))});

runner.start();

结果：

1000 // 过了1000ms
1000 // 过了2000ms
1000 // 过了3000ms

3. 打印每次正在进行的是什么函数，增加一个查看当前任务队列的函数

"use strict"

function TaskRunner() {
    this.currentTask = Promise.resolve();
  this._currentTask = [];
}

TaskRunner.prototype.push = function (task) {
    this._currentTask.push(task);
}

TaskRunner.prototype.run = function (task) {
    var func = () => {
        return new Promise((resolve) => {
            console.log("Running ", task.name);
            this._currentTask.shift()
            resolve(task.func());
        })
    }
    return (this.currentTask = this.currentTask.then(func, func));
}

TaskRunner.prototype.start = function () {
    if (!this._currentTask.length) {
        console.log("当前任务队列为空");
        return;
    }

    this._currentTask.forEach(task => {
        this.run(task);
    })
}

TaskRunner.prototype.showTaskRunner = function () {
    if (!this._currentTask.length) {
    console.log("当前任务队列为空");
    return;
  }

    this._currentTask.forEach((task, index) => console.log(index, task));
}

var runner = new TaskRunner();


runner.push({name: "任务1",func: function(){return new Promise(resolve => setTimeout(() => {console.log(1000);resolve()}, 1000))}});
runner.push({name: "任务2",func: function(){return new Promise(resolve => setTimeout(() => {console.log(1000);resolve()}, 1000))}});
runner.push({name: "任务3",func: function(){return new Promise(resolve => setTimeout(() => {console.log(1000);resolve()}, 1000))}});

runner.start();

runner.showTaskRunner();
setTimeout(() => runner.showTaskRunner(), 1000);
setTimeout(() => runner.showTaskRunner(), 2000);
setTimeout(() => runner.showTaskRunner(), 3000);

结果：

0 { name: '任务1', func: [Function: func] }
1 { name: '任务2', func: [Function: func] }
2 { name: '任务3', func: [Function: func] }
Running  任务1
0 { name: '任务2', func: [Function: func] }
1 { name: '任务3', func: [Function: func] }
1000
Running  任务2
0 { name: '任务3', func: [Function: func] }
1000
Running  任务3
当前任务队列为空
1000