как сделать обратные вызовы JavaScript и остановить асинхронный - простой пример

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

Есть два основных способа сделать это:

Один из способов - использовать обратные вызовы , то есть передать функцию в качестве параметра функции 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)

Другой способ сделать это - использовать Обещания .Обещанием является контракт, который либо будет выполнен (решен), либо не выполнен (отклонен).Это позволяет пользователю определять отдельную логику, которая будет выполняться после разрешения или отклонения обещания соответственно.

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)

Подробнее о Обратные вызовы @ MDN Подробнее о Обещания @ MDN

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 Пример

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.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

Позвонив по номеру обратного вызова.

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