Javascript:什么是回调？

Question

在this我提到的那篇文章是这样声明的:

Callbacks are a way to make sure certain code doesn’t execute until other code has already finished execution.

文章接着举例说明:

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}

doHomework('math', function() {
  alert('Finished my homework');

在此之后，文章指出:

As you’ll see, if you type the above code into your console you will get two alerts back to back: Your ‘starting homework’ alert, followed by your ‘finished homework’ alert.

暗示似乎是通过使用回调确保了所需的代码执行顺序。那就是你在完成作业之前开始你的作业。但是，我觉得我可能误解了文章的全部要点，因此仍然不理解回调和异步代码，因为当我使用 setTimeout() 减慢 doHomework 函数的第一部分时，代码执行(或至少返回)在相反的顺序:

function doHomework(subject, callback) {

  setTimeout(function(){
      console.log(`Starting my ${subject} homework.`);
  }, 500); 

  callback();
}

doHomework('math', function() {
  console.log('Finished my homework');
});

我得到的结果是:

steve@Dell ~/my-app $ node app.js 
Finished my homework
Starting my math homework.
});

我在这里使用节点(因此 console.log() 替换了 alert())但我认为这不相关。

在我看来，我错过了一些非常基本的东西，在我尝试理解它之前，需要尝试访问我想要理解的东西。

在此过程中提供任何帮助，我们将不胜感激。

在获得很好的反馈后，我认为家庭作业类比没有帮助，所以我现在使用我引用的文章中的第一个代码示例。文章给出了这段代码:

function first(){
  // Simulate a code delay
  setTimeout( function(){
    console.log(1);
  }, 500 );
}

function second(){
  console.log(2);
}

first();
second();

上面的代码在控制台中返回 2 然后 1。

我尝试(但没有成功)将返回顺序反转为 1 然后 2:

function first(callback){
    setTimeout(function(){
        console.log(1);
    }, 500);
    callback();
}
function second(){
    console.log(2);
}
first(second);

我从 Cleared(编辑之前)得到的答案是将 callback() 放在 setTimeout() 函数中。他使用了家庭作业示例，但这里是这个示例:

function first(callback){
    setTimeout(function(){
        console.log(1);
        callback();
    }, 500);
}

function second(){
    console.log(2);
}

first(second);

我认为这更接近我想象的文章要表达的意思。这似乎是有道理的，尽管我猜你正在做的事情和你想要发生的事情的确切背景决定了对错。

Answer 1

一般来说，对回调的调用不是在函数的结束，而是在你完成了重要的事情之后。

所以如果我理解你的问题，doHomework 函数应该开始做作业(这需要时间，在本例中为 500 毫秒)，然后作业完成。所以在你的案例中重要的事情是 console.log('Starting my ${subject} homework.'); 这“需要 500 毫秒”(因为这是时间你需要做功课)。

因此，您应该在 console.log('Starting my ${subject} homework.'); 之后立即调用回调，即

function doHomework(subject, callback) {

  setTimeout(function(){
      console.log(`Starting my ${subject} homework.`);
      callback();
  }, 500); 
}

doHomework('math', function() {
  console.log('Finished my homework');
});