使用場景
在網路速度有限的情況下，依序記錄不斷產生的資訊，能統計使用者在頁面上操作了哪些功能。
依序執行不斷產生的任務
實現過程
打造一個類別（Executor），裡面有一個對外函式（recordData），會把使用者加入的任務不斷加入陣列內。這裡為了方便，讓使用者傳入字串，自動把字串變成過兩秒會印在console的任務函式。
class Executor {
constructor() {
this.pendingFunctionArray = [];
}
recordFunction = async (string) => {
await new Promise((resolve) => setTimeout(resolve, 2000));
console.log(`${string} finish`);
};
recordData = (string) => {
this.pendingFunctionArray.push(() => recordFunction(string));
}
}
加入一個函式，裡面有個回圈會依序執行任務。每次使用者呼叫recordData加入任務，就會呼叫這個函式，讓這個函式不斷執行，直到任務完成後停止。
class Executor {
constructor() {
this.pendingFunctionArray = [];
}
recordFunction = async (string) => {
await new Promise((resolve) => setTimeout(resolve, 2000));
console.log(`${string} finish`);
};
recordData = (string) => {
this.pendingFunctionArray.push(() => recordFunction(string));
this.scheduleTasks();
};
scheduleTasks = async () => {
while (true) {
if (this.pendingFunctionArray.length == 0) break;
const recordFunction = this.pendingFunctionArray.shift();
await recordFunction();
}
};
}
但這樣會產生多個scheduleTasks函式同時執行，可能產生預期外的結果。可以加入一個參數isExecuting來判斷，確保只有一個scheduleTasks函式在執行。
class Executor {
constructor() {
/**@type {Function[]} 待處理陣列 */
this.pendingFunctionArray = [];
/**是否正在排程執行任務 */
this.isExecuting = false;
}
recordFunction = async (string) => {
await new Promise((resolve) => setTimeout(resolve, 2000));
console.log(`${string} finish`);
};
recordData = (string) => {
this.pendingFunctionArray.push(() => recordFunction(string));
this.scheduleTasks();
};
scheduleTasks = async () => {
if (this.isExecuting) return;
this.isExecuting = true;
while (true) {
if (this.pendingFunctionArray.length == 0) {
this.isExecuting = false;
break;
}
const recordFunction = this.pendingFunctionArray.shift();
await recordFunction();
}
};
}
最後附上在線demo的鏈接：依序執行不斷產生的任務
