代码之家 › 专栏 › 技术社区 › user3425506

javascript:什么是回调?

express javascript

user3425506 · 技术社区 · 5 年前

在 this 我所指的条款如下:

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

接下来,本文将通过一个示例来说明这一点:

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.
});

我在这里使用node(因此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);

我认为这更接近我对这篇文章的想象。这似乎是有意义的,尽管我猜你所做的和你想发生的事情的确切背景决定了什么是对的或错的。

4 回复 | 直到 5 年前

Cleared 5 年前

通常,对回调的调用不在结束但更确切地说 在你做了重要的事情之后 .

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

因此,您应该在 console.log('开始我的$主题家庭作业'); ,即

function doHomework(subject, callback) {

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

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

Quentin 5 年前

通常,当您完成不管你在做什么。

所以,您的setTimeout函数内部和外部的代码是向后的。

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

JestaBlunt 5 年前

javascript中的回调用于异步编程,在异步编程中,您不能确保上面的代码在下面的代码之前运行,例如从服务器异步加载文件。

问题是,对于正常的顺序编程,您无法确保在程序运行时完全加载您获取的数据(即,如果运行脚本,一次可以设置变量,另一次可以不定义变量,因为异步任务仍在运行),因此您设置了一个回调函数,该函数连接到difference。NT状态,即Ajax调用的成功或错误。与正常编程流程不同的是,在加载数据之前,程序不会停止(或者在您的情况下,超时不会暂停程序,然后计算代码,如果不使用固定值,则可以随时运行超时)。

因此,为了确保代码在所需逻辑完成时运行,您必须传递一个回调函数,该函数在完成所需状态时执行(即加载任务时的成功/错误,或者超时“完成”)。

作业示例IMO不是最好的示例,因为它不涉及实际的用例,因为它总是“等待”500毫秒。

在您的示例中,问题是,您的“回调”超出了代码的“异步”部分,因此它在启动超时之后直接执行,即使超时仍然是“正在运行”。也许你对settimeout的想法是个问题,在我的javascript开始的时候,我觉得它更像是“暂停500ms”,但它“在正常代码流外等待500ms后执行范围内的代码”。

以下是更多信息,我可以推荐整个页面,即使您不是javascript noob;) https://javascript.info/callbacks

HarryCoder Vasyl Gutnyk 5 年前

什么是回调?

类似递归的函数中的回调含义函数。

让我举个例子:

每天我们吃东西然后睡觉。但在JS代码中, JS is an impatient language 不像PHP。这是示例代码:

// Consuming 3s to eating(just an example, not really 3s)
function eating() {
    setTimeout(function() {
        console.log('Eating...');
    }, 3000);
}

// Then go to sleep
function sleep() {
    console.log('Z..Z..Z');
}

eating();
sleep();

但是你在……之后马上睡觉(当我们运行代码时,它先运行sleep,然后运行eating())

为了确保一切正常,这意味着你只在吃完饭后才去睡觉。所以我们需要 eating() 告诉我们什么时候开始 sleep() :

// Consuming 3s to eating(just an example, not really 3s)
function eating(callback) {
    setTimeout(function() {
        console.log('Eating...');
        callback() // the function which will be proceeded after "Eating..."
    }, 3000);
}

// Then go to sleep
function sleep() {
    console.log('Z..Z..Z');
}

// call the function
eating(function() {
    sleep();
});

是啊!现在我认为您可以在代码中使用回调!

在哪里可以看到回调?

你可以在每个 JQuery 代码:

$("#hide").click(function(){ //the click() function call the function inside it which is callback
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});