排队异步功能，并限制为1个并行执行

Question

我有一个异步javascript函数，可以称它为generateThumbnail 。 在特定事件上调用该函数。 （例如，单击按钮）。 问题是，并行执行任务多次将使脚本用尽内存。 所以我想按顺序执行它。

 function generateThumbnail(arg) { return new Promise((resolve, reject) => { console.log('start', arg); setTimeout(() => { console.log('end', arg); resolve(arg); }, 1000); }); } // I tried the following, which is not working, // as it still results in multiple pending promises at a given time. var lastExecution; async function generateThumbnailQueued(arg) { //await last execution... only start after its done await lastExecution; lastExecution = generateThumbnail(arg); return lastExecution; } 

 <button onclick="generateThumbnailQueued(++this.i || (this.i = 1))">Do Task</button> 

快速按下按钮3次可产生输出

start 1
end 1
start 2
start 3
end 2
end 3

我想要的是

start 1
end 1
start 2
end 2
start 3
end 3

Answer 1

保留最后一次执行中的承诺，并将每个新的调用链接到该...

let promise = Promise.resolve();

function userPressesButton() {
    let arg = // ...
    promise = promise.then(() => generateThumbnail(arg));
    return promise;
}