JavaScript 带有回调/闭包的控制台写入任务？

Question

I'm working on a JavaScript task where I need to print to the console different instructions after a certain amount of time has passed. The task is to make and serve sandwiches. A sandwich takes 1 minute to make, and 30 seconds to serve.

The function needs to take the number of sandwiches that are requested and print in an order like "Make Sandwich 1, Serve Sandwich 1, Make Sandwich 2, Serve Sandwich 2" etc

This is what I have so far, but it's not working correctly and I'm not sure how to fix it.

function makeSandwich(num, callback) {
  for (let i = 0; i < num; i++) {
    console.log("Make Sandwich " + i);
    setTimeout(() => {
      callback(i);
    }, 6000);
  }
}

function serveSandwich(num) {
    setTimeout(() => {
    console.log("Serve sandwich " + num);
  }, 3000);
}

makeSandwich(2, serveSandwich); //this does make, make, serve, serve

Answer 1

JavaScript setTimeout callbacks are asynchronous, so when you use it, the rest of the code keeps running.

When you call makeSandwich , this is what happens:

• First loop
  • log to console: "Make sandwich 0"
  • start setTimeout timer (A), the passed function will run in 6 seconds
  • end loop
• Second loop
  • log to console: "Make sandwich 1"
  • start second setTimeout timer (B)
  • end loop
• First timer (A) completes
  • callback(0) is called
  • start setTimeout timer (C) for serving sandwich 1
• Second timer (B) competes
  • callback(1) is called
  • start setTimeout timer (D) for serving sandwich 2
• Third timer (C) completes
  • log to console: "Serve sandwich 0"
• Fourth timer (D) completes
  • log to console: "Serve sandwich 1"

If you want the functions to be run sequentially, you can use recursive callbacks.

// Make the sandwiches one by one, waiting each to complete before working on the next one
function makeSandwich(num, callback, i = 1) {
  console.log("Make Sandwich " + i);
  setTimeout(() => {
    // Pass a callback to the callback that will trigger when serving is complete
    callback(i, () => {
      // If there are still sandwiches left to make, start the next one
      if (i < num) {
        // This is the recusive part, the function calls itself to trigger the next loop 
        makeSandwich(num, callback, ++i);
      }
    });
  }, 6000);
}

function serveSandwich(num, callback) {
  console.log("Serve sandwich " + num);
  // This callback will let us know when serving is complete
  setTimeout(() => callback(), 3000);
}

makeSandwich(2, serveSandwich);

Answer 2

You can create a little delay function using a promise , and async/await to execute the food order.

 // Takes a number in milliseconds function delay(n) { return new Promise(res => { setTimeout(() => res(), n); }); } // Now iterate, log the result, // and delay for `n` milliseconds async function makeOrder(num) { for (let i = 0; i < num; i++) { console.log(`Make sandwich ${i + 1}`); await delay(2000); console.log(`Serve sandwich ${i + 1}`); await delay(1000); } } makeOrder(2);

Answer 3

Is this what you ment?

function makeSandwichNew(num, callback) {
    if (num==0) console.log('Order \'Making\' Ready')
    else
    {
      console.log("Make Sandwich " + num);
      setTimeout(() => {
        console.log('sandwitch ' + num + ' ready')
        makeSandwichNew(num-1, callback)
        callback(num);
      }, 6000);
    }
}