JavaScript 回调函数仅部分执行答案

【问题标题】：JavaScript callback functions only partially executeJavaScript 回调函数仅部分执行
【发布时间】：2021-05-22 21:15:17
【问题描述】：

我正在尝试创建一个程序来说明 JavaScript 中的嵌套回调函数，没有 Promise 或 asyc/await。每个函数都应该控制它的执行次数并计算下一个执行次数以传递给它的前任。但是，在调用 sequenceLogs 函数时，只执行 logFirst。其他功能永远不会执行。如何让第二到第五个函数正确执行？

function logFirst(number) {
    console.log(`Runs ${number}rst`);
    return;
}
function logSecond(number) {
    console.log(`Runs ${number}nd`);
    let newNumber;
    setTimeout(() => {newNumber = number - 1;}, 75);
    return newNumber;
}
function logThird(number) {
    console.log(`Runs ${number}rd`);
    return number-1;
}
function logFourth(number) {
    console.log(`Runs ${number}th`);
    let newNumber; 
    setTimeout(() => {newNumber = number - 1;}, 50);
    return newNumber;
}
function logFifth(number) {
    console.log(`Runs ${number}th`);
    return number-1;   
}

const sequenceLogs = (number) => {
    return logFirst(() => {
        logSecond(()=>{
            logThird(()=> {
                logFourth(()=>{
                    logFifth(number);
                });
            });
        });
    });
};

// Set the number to run in the fifth function
sequenceLogs(5);

【问题讨论】：

你传递的是回调，而不是数字 - 所以，调用参数 - 回调
根据@CertainPerformance 的建议，我使程序更简单（参见上面的第二次尝试），现在我使用回调作为参数。但是，在尝试控制台 logSecond 函数的结果时，我仍然收到未定义的消息。带有 setTimeout 的 callBack1 函数似乎没有返回任何内容。我是否正确调用了 setTimeout 函数？
你不能通过异步回调return。

标签： javascript asynchronous callback settimeout

【解决方案1】：

请看下面的解决方案：

// log function
function logData(number, suffix, time, retrieveDataCB) {
  // console out the current number
  console.log(`Runs ${number}` + suffix);

  setTimeout(() => {
    console.log("Now we have the data");
    // instead of returning the data before
    // it's available, wrap the data to be
    // returned in a callback, so it will have
    // access in the main execution loop

    // once setTimeout runs, we invoke the
    // retrieveDataCB function, which triggers
    // gives the main loop access to the data.

    retrieveDataCB({ newNumber: number + 1 });
  }, time);

  // Runs before data is available.
  // return number + 1;
}

//Run the sequence
const executeMainLoop = (startingNum) => {
  // Execute getNumber function and pass the retrieveDataCB, which will have access to the newNumber object.
  logData(startingNum, "rst", 0, (data) => {
    // console.log("NewNumber2:", data.newNumber);
    // log 2nd stmt
    logData(data.newNumber, "nd", 5000, (data) => {
      // log 3rd stmt
      logData(data.newNumber, "rd", 0, (data) => {
        // log 4th stmt
        logData(data.newNumber, "th", 50, (data) => {
          // log 5th stmt
          logData(data.newNumber, "th", 0, (data) => {});
        });
      });
    });
  });
};

//   run sequence function
executeMainLoop(1);

【讨论】：