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

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

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

引言

假設(shè)有這么一個場景：

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

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

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

任務(wù)隊列的概念

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

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

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

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

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

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

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

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

/** @format */
class TaskQueue {
    constructor() {
        this.queue = [];
        this.isRunning = false;
    }
    /**
     * @description 將任務(wù)添加至隊列
     * @param {Promise} queueFunction
     * @returns {undefined}
     */
    addQueue(queueFunction) {
        this.queue.push(queueFunction);
        if (!this.isRunning) {
            this.processQueue();
        }
    }
    /**
     * @description 如果隊列不為空，則開始處理隊列中的任務(wù)，本次任務(wù)執(zhí)行完畢后，立刻開始下一條任務(wù)的執(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("    任務(wù) 1");
};
let f2 = function (name) {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log(`我是 f2`, name);
            resolve();
        }, 2000);
    });
};
let f22 = async function () {
    await f2("    任務(wù) 2");
};
let f3 = function (name) {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log(`我是 f3`, name);
            resolve();
        }, 1000);
    });
};
let f33 = async function () {
    await f3("    任務(wù) 3");
};
taskQueue.addQueue(f11);
taskQueue.addQueue(f22);
taskQueue.addQueue(f33);
// 依次輸出：
// 我是 f1     任務(wù) 1
// 我是 f2     任務(wù) 2
// 我是 f3     任務(wù) 3

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