Javascript:什么是回调？

Question

在这个文章,我被提到了下面的语句是由:

回调是一种确保某些代码在其他代码已经完成执行之前不会执行的方法.

然后,本文继续用一个例子来说明这一点:

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

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

在此之后文章指出:

正如您所看到的,如果您在控制台中输入上述代码,您将收到两个警告:您的"开始作业"警报,然后是"完成的作业"警报.

暗示似乎是通过使用回调,确保了所需的代码执行顺序.那就是你在完成它之前开始做作业.但是,我觉得我可能误解了文章的全部内容,因此仍然不理解回调和异步代码,因为当我使用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-function应该开始做作业(这需要时间,在这种情况下是500ms),然后完成作业.因此,在您的情况下,重要的事情是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');
});