JavaScript 回调函数仅部分执行

Question

我正在尝试创建一个程序来说明 JavaScript 中的嵌套回调函数，没有承诺或 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);

Answer 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);

JavaScript 回调函数仅部分执行

JavaScript callback functions only partially execute

javascript

asynchronous

callback

settimeout