基于JS实现任务队列的示例代码

/** @format */
class TaskQueue {
    constructor() {
        this.queue = [];
        this.isRunning = false;
    }
    /**
     * @description 将任务添加至队列
     * @param {Promise} queueFunction
     * @returns {undefined}
     */
    addQueue(queueFunction) {
        this.queue.push(queueFunction);
        if (!this.isRunning) {
            this.processQueue();
        }
    }
    /**
     * @description 如果队列不为空，则开始处理队列中的任务，本次任务执行完毕后，立刻开始下一条任务的执行
     * @param {}
     */
    processQueue() {
        if (this.queue.length > 0) {
            this.isRunning = true;
            const queueFunction = this.queue.shift();
            queueFunction().finally(() => {
                this.processQueue();
            });
        } else {
            this.isRunning = false;
        }
    }
}

let taskQueue = new TaskQueue();
let f1 = function (name) {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log(`我是 f1`, name);
            resolve();
        }, 3000);
    });
};
let f11 = async function () {
    await f1("    任务 1");
};
let f2 = function (name) {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log(`我是 f2`, name);
            resolve();
        }, 2000);
    });
};
let f22 = async function () {
    await f2("    任务 2");
};
let f3 = function (name) {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log(`我是 f3`, name);
            resolve();
        }, 1000);
    });
};
let f33 = async function () {
    await f3("    任务 3");
};
taskQueue.addQueue(f11);
taskQueue.addQueue(f22);
taskQueue.addQueue(f33);
// 依次输出：
// 我是 f1     任务 1
// 我是 f2     任务 2
// 我是 f3     任务 3