如何用JavaScript回调递归实现setTimeout调用链式执行

当然可以用递归实现，既能避免嵌套回调的冗余，还能完全保留你原delay函数的回调链式逻辑。直接写一个递归函数逐个处理数组项即可：

function delayChainRecursive() {
    const items = [
        {message:"Waited 01 sec", time:1000},
        {message:"Waited 02 sec", time:2000},
        {message:"Waited 04 sec", time:4000},
        {message:"Waited 03 sec", time:3000}
    ];

    // 递归处理函数
    function processItem(index) {
        // 所有项处理完毕，输出结束信息
        if (index >= items.length) {
            console.log("Done Waiting");
            return;
        }
        // 调用delay，回调里递归处理下一项
        delay(items[index], function() {
            processItem(index + 1);
        });
    }

    // 从第一个项开始处理
    processItem(0);
}

逻辑说明 #

• 定义processItem递归函数，接收当前处理的索引index
• 当索引超出数组长度时，说明所有延迟任务执行完毕，输出Done Waiting
• 否则调用你的delay函数，在回调里递归调用processItem处理下一个索引的项，以此形成回调链式的递归执行，效果和原嵌套回调完全一致，但不会因为数组变长而出现无限嵌套的冗余代码

内容的提问来源于stack exchange，提问作者TheLovelySausage