基于JS實現(xiàn)任務隊列的示例代碼

更新時間：2023年08月25日 11:10:27 作者：編程三昧

顧名思義,任務隊列就是存放任務的隊列,隊列中的任務都嚴格按照進入隊列的先后順序執(zhí)行,所以下面我們就來看看如何基于JS實現(xiàn)任務隊列吧

引言

假設有這么一個場景：

前端訂閱后臺數(shù)據(jù)的變化，如果發(fā)生變化，則觸發(fā)訂閱回調(diào)；
回調(diào)函數(shù)中，會執(zhí)行一些耗時操作，如：請求接口，發(fā)送短信，存歷史數(shù)據(jù)等；
要求以上所有的操作都必須按照訂閱觸發(fā)的順序執(zhí)行；

我們都知道，回調(diào)本身就是一種異步操作，我們僅僅依靠訂閱回調(diào)無法保證回調(diào)中任務執(zhí)行順序的。

為了解決這個問題，我們可以使用任務隊列，將回調(diào)函數(shù)添加到任務隊列中，然后按照順序依次執(zhí)行。

任務隊列的概念

顧名思義，任務隊列就是存放任務的隊列，隊列中的任務都嚴格按照進入隊列的先后順序執(zhí)行。

在前一條任務執(zhí)行完畢后，立即執(zhí)行下一條任務，直到任務隊列清空。

任務隊列的基本執(zhí)行流程如下：

給任務隊列添加任務，并判斷執(zhí)行標識；
如果執(zhí)行標識為 false，則將任務從隊列中獨立出來；
開始執(zhí)行任務，將執(zhí)行標識置為 true；
執(zhí)行完畢后，判斷隊列是否為空，如果不為空，則繼續(xù)執(zhí)行下一條任務；
直至任務隊列清空。

任務隊列一直在循環(huán)進行如上步驟。

任務隊列的 JS 實現(xiàn)

我們選擇使用數(shù)組來維護隊列的執(zhí)行順序，按照“先進先出“的原則，依次從數(shù)組的第一個元素開始往后執(zhí)行。

簡易代碼實現(xiàn)如下：

/** @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 如果隊列不為空，則開始處理隊列中的任務，本次任務執(zhí)行完畢后，立刻開始下一條任務的執(zhí)行
     * @param {}
     */
    processQueue() {
        if (this.queue.length > 0) {
            this.isRunning = true;
            const queueFunction = this.queue.shift();
            queueFunction().finally(() => {
                this.processQueue();
            });
        } else {
            this.isRunning = false;
        }
    }
}

測試

我們使用如下代碼來測試上述實現(xiàn)：

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

如果不使用任務隊列，上面的測試應該是按照 f1 -> f2 -> f3 的順序執(zhí)行，但是使用了任務隊列之后，f1 -> f2 -> f3 的順序執(zhí)行被改變了，這是因為任務隊列的執(zhí)行順序是按照添加的順序來的，而不是按照執(zhí)行順序來的。