Question

我正试图将注意力集中在javascript回调上，并且很难过。我有一些简单的代码：如何使肥料函数在使用回调执行水功能之前等待水功能完成？

function plant() {
    console.log("Plant maize"); 
}

function water() {
    setTimeout(function() {
        console.log("Water plant")
      },3000);
}

function fertilizer() {
    console.log("Add fertilizer");
}

plant();
water();
fertilizer();

Answer 1

通过回调调用它。

function plant() {
  console.log("Plant maize");
}

function water() {
  setTimeout(function() {
    console.log("Water plant")
    fertilizer(); //  <--- HERE
  }, 3000);
}

function fertilizer() {
  console.log("Add fertilizer");
}

plant();
water();
// fertilizer();    <-- not here

Answer 2

您可以向肥料添加回调，并将函数fertilizer传递给water方法。

function plant() {
    console.log("Plant maize"); 
}

function water(callback) {
    setTimeout(function() {
        console.log("Water plant")
        callback();
      },3000);
}

function fertilizer() {
    console.log("Add fertilizer");
}

plant();
water( function () {
    fertilizer();
});

JSBIN Example

Answer 3

您不需要回调，只需在水超时内调用化肥函数即可：

function plant() {
    console.log("Plant maize"); 
}

function water() {
    setTimeout(function() {
        console.log("Water plant");
        fertilizer();
      },3000);
}

function fertilizer() {
    console.log("Add fertilizer");
}

plant();
water();

使用出色的async library，您可以通过将回调显式添加到所有函数中来做到这一点：

async.series([ plant, water, fertilizer ], function(error, results){
  console.log("done!");
});

function plant(callback) {
    console.log("Plant maize"); 
    callback(null);
}

function water(callback) {
    setTimeout(function() {
        console.log("Water plant");
        callback(null);
      },3000);
}

function fertilizer(callback) {
    console.log("Add fertilizer");
    callback(null);
}

Answer 4

有两种基本方法：

一种方法是使用回调，即将函数作为参数传递给water函数，该函数将在发生超时时被调用。回调是一种在某些逻辑后按需调用的函数。

function plant() { console.log("Plant maize") }

function water(onSuccess) {
    setTimeout(function() {
        console.log("Water plant")
        /* see here we are calling the passed function after we have successfully processed the remaining logic */
        if (typeof onSuccess === "function") { onSuccess() }
      },3000)
}

function fertilizer() { console.log("Add fertilizer") }

plant()
/* fertilizer function is passed to water function as callback */
water(fertilizer)

另一种方法是使用 Promise 。承诺是合同，它将被履行（解决）或不履行（拒绝）。它允许用户定义单独的逻辑，这些逻辑将在分别解决或拒绝承诺后运行。

function plant() { console.log("Plant maize") }

function water() {
    return new Promise(function (resolve) {
      setTimeout(function() {
        console.log("Water plant")
        /* calling resolve will fulfill the promise */
        resolve()
      },3000)
    })
}

function fertilizer() { console.log("Add fertilizer") }

plant()
/* .then adds a function containing logic which will be executed after promise is fulfilled, so here we pass fertilizer function */
water().then(fertilizer)

进一步了解Callbacks @ MDN 进一步了解Promises @ MDN

如何执行JavaScript回调并停止异步-简单示例

4 个答案: