JavaScript 多重回调函数答案

【问题标题】：JavaScript Multiple Callback FunctionJavaScript 多重回调函数
【发布时间】：2014-05-20 00:35:38
【问题描述】：

一段时间以来，我一直在尝试找出 Javascript 中的回调函数功能，但没有任何成功。我可能把代码搞砸了，但是我没有收到任何 Javascript 错误，所以我认为语法有些正确。

基本上，我正在寻找 getDistanceWithLatLong() 函数在 updateDB() 开始之前结束，然后确保在 printList() 函数开始之前结束。

我让它在函数上使用硬编码的“setTimeout”调用，但如果回调的东西可以工作，我会过度补偿并迫使用户等待更长时间而无需等待。

有什么建议吗？下面是代码：

function runSearchInOrder(callback) {
    getDistanceWithLatLong(function() {
        updateDB(function() {
            printList(callback);
        });
    });
}

【问题讨论】：

忽略多个回调的问题，你想完成什么？
我需要以下 3 个函数才能按顺序运行和完成：getDistanceWithLatLong();更新数据库（）； printList()：只是以我认为可行的方式列出它们，但是当我在 console.log 中打印内容时，有时 printList() 在另一个函数的循环完成之前运行。
getDistance... 和 updatedDB 函数是否需要回调？我不明白为什么如果他们这样做它就不起作用。

标签： javascript callback

【解决方案1】：

为此，您需要将下一个回调传递给每个函数。

function printList(callback) {
  // do your printList work
  console.log('printList is done');
  callback();
}

function updateDB(callback) {
  // do your updateDB work
  console.log('updateDB is done');
  callback()
}

function getDistanceWithLatLong(callback) {
  // do your getDistanceWithLatLong work
  console.log('getDistanceWithLatLong is done');
  callback();
}

function runSearchInOrder(callback) {
    getDistanceWithLatLong(function() {
        updateDB(function() {
            printList(callback);
        });
    });
}

runSearchInOrder(function(){console.log('finished')});

此代码输出：

getDistanceWithLatLong is done
updateDB is done
printList is done
finished

【讨论】：

如何将变量从一个回调传递到另一个？

【解决方案2】：

这行不通：

function callback(f1, f2) {
    f1();
    f2();
}

至于传递参数，要有创意。

【讨论】：

【解决方案3】：

function1 = (callback1, callback2, callback3) => {
  setTimeout(() => {
    console.log("function 1 timed out!");
    callback1(callback2, callback3);
  }, 1500);
}

function2 = (callback1, callback2) => {
  setTimeout(() => {
    console.log("function 2 timed out!");
    callback1(callback2);
  }, 1500);
}

function3 = (callback1) => {
  setTimeout(() => {
    console.log("function 3 timed out!")
    callback1()
  }, 1500);
}

function4 = () => {
  setTimeout(() => {
    console.log("function 4 timed out!")
  }, 1500);
}

function1(function2, function3, function4);

只需传递第一个函数的回调并执行每个回调，然后传递其余的。

输出

function 1 timed out!
function 2 timed out!
function 3 timed out!
function 4 timed out!

【讨论】：

【解决方案4】：

在 JavaScript 中，一切都是对象，包括函数。这就是为什么您可以将回调作为参数传递的原因 - 您传递的是一个函数，就好像它是任何其他对象一样。

在每个函数声明中，都需要运行回调。

function runSearchInOrder(callback) {

    ...

    callback();
}

function getDistanceWithLatLong(callback) {

    ...

    callback();
}

function updateDB(callback) {

    ...

    callback();
}

那么你上面发布的代码应该可以工作了。

【讨论】：