JavaScript 嵌套 callback 函数仅部分执行，如何让后续函数正常运行

问题根因 #

• 现有所有log函数的设计仅接收数值参数，没有处理传入的回调函数逻辑，你在sequenceLogs中嵌套传入的回调函数根本不会被执行，自然只有第一个logFirst可以正常运行
• logSecond、logFourth中使用了setTimeout异步逻辑，直接return变量的话，定时器回调还未执行，返回的变量永远是undefined，异步操作的结果不能靠return返回，必须通过回调函数传递

调整方案 #

所有log函数新增回调参数，计算得到下一个执行序号后，调用回调将序号传递给下一个执行函数：

// 所有log函数新增第二个参数callback，计算完成后调用回调传递下一个序号
function logFirst(number, callback) {
    console.log(`Runs ${number}rst`);
    const nextNumber = number - 1;
    callback && callback(nextNumber);
}
function logSecond(number, callback) {
    console.log(`Runs ${number}nd`);
    // 异步操作结束后再调用回调传递结果
    setTimeout(() => {
        const nextNumber = number - 1;
        callback && callback(nextNumber);
    }, 75);
}
function logThird(number, callback) {
    console.log(`Runs ${number}rd`);
    const nextNumber = number - 1;
    callback && callback(nextNumber);
}
function logFourth(number, callback) {
    console.log(`Runs ${number}th`);
    setTimeout(() => {
        const nextNumber = number - 1;
        callback && callback(nextNumber);
    }, 50);
}
function logFifth(number, callback) {
    console.log(`Runs ${number}th`);
    const nextNumber = number - 1;
    callback && callback(nextNumber);   
}

const sequenceLogs = (initialNumber) => {
    // 按执行顺序嵌套调用，前一个函数完成后自动触发下一个函数执行
    logFirst(initialNumber, (nextNumber) => {
        logSecond(nextNumber, (nextNumber) => {
            logThird(nextNumber, (nextNumber) => {
                logFourth(nextNumber, (nextNumber) => {
                    logFifth(nextNumber);
                });
            });
        });
    });
};

sequenceLogs(5);

运行输出 #

Runs 5rst
Runs 4nd
Runs 3rd
Runs 2th
Runs 1th

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