定义在调用函数后运行的回调的正确方法是什么？

Question

例如，我想定义一个回调，它仅在使用回调完成任务时显示消息。 请不要谈论Promises，我知道它可以在这里应用。

1.我的第一次尝试：

function doHomeWork (subject, callback) {
    setTimeout(() => {
        console.log(`Started my ${subject} homework`);
    }, 500);
    callback(subject);
}

function finishedHomework (subject) {
    console.log(`Finished my ${subject} homework`);
}

doHomeWork('math', finishedHomework);

这会在Started..之前打印Finished..因为callback(subject)不等待setTimeout的结束。

如果我将callback(subject)调用到setTimeout它将同时打印两条消息，而不是我想要的。

这个答案把setTimeout放在回调调用中，但是，在我的假设情况下，什么消耗时间是doHomeWork ，而不是finishedHomeWork的回调，因此，它对这个例子无效。

我的第二次尝试：

function homeWork (subject, callback) {
    doHomeWork(subject);
    callback(subject);
}

function doHomeWork (subject) {
    setTimeout(() => {
        console.log(`Started my ${subject} homework`);
    }, 500);
}

function finishedHomework (subject) {
    console.log(`Finished my ${subject} homework`);
}

homeWork('math', finishedHomework);

这也会在Started..之前打印Finished.. ，因为callback(subject)不等待doHomeWork(subject) 。

因此，回调解释说它是一个函数，它将在调用它的函数之后运行，不是吗？ 但是，正如我的例子所示，我没有找到定义它在doHomeWork完成后运行的doHomeWork 。

缺什么？

Answer 1

嗨问题是，什么时候是这个功能

() => {console.log(`Started my ${subject} homework`);}

只有当setTimeout结束时才会运行，所以我看到的是最好的解决方案

function doHomeWork (subject, callback) {
    console.log(`Started my ${subject} homework`);
    setTimeout(() => {
        callback(subject);
    }, 500);
}

Answer 2

首先，这就是你需要承诺的原因。

Javascript并不关心你的第二个参数是回调。 它会尽快运行回调函数，因为它不会等待前面的调用完成，这是您在两个示例中演示的行为。

要仅使用回调执行此操作，请将回调放在setTimeout函数中。

function doHomeWork (subject, callback) {
    setTimeout(() => {
        console.log(`Started my ${subject} homework`);
        callback(subject); // <---------   CHANGE MADE HERE
    }, 500);
    //callback(subject)  // Remove this line, and move it up ^^^
}

function finishedHomework (subject) {
    console.log(`Finished my ${subject} homework`);
}

doHomeWork('math', finishedHomework);

但是 ，您应该只使用Promises。 它们实际上很简单，更易读。 相同的功能可以写成：

function doHomeWork (subject) {
  return new Promise( (resolve,reject) => {   //Turns a regular funciton into a promise
    setTimeout(() => {
        console.log(`Started my ${subject} homework`);
        resolve(subject);
    }, 500);
  }); 
}

function finishedHomework (subject) {
    console.log(`Finished my ${subject} homework`);
}

doHomeWork('math').then( (subject) => { //since doHomeWork returns a promise we can use .then() on it
    finishedHomework(subject);
});

Answer 3

也许尝试在匿名函数中包装你的回调？ （没有经过测试，但每当我遇到同样的问题时，通常是我的第一个猜测。）

homeWork('math', function(){finishedHomework()});