javascript - 如何创建一个 Javascript 函数调用列表，等待上一个函数完成后再调用下一个函数？

Question

我目前正在构建一个标牌系统，以一致的格式显示各个地点的时刻表信息。

这个想法是，每个位置都有自己的轻量级页面，其中包含少量变量，这些变量定义位置特定的参数，然后从单个外部 .js 文件按顺序调用适当的函数。

我的页面可以正常使用显式链接在一起的函数，如下所示:

function one (){        
    //do the thing
    two();      
}

function two (){        
    //do the next thing
    three();        
}

function three (){      
    //do the last thing
}   

我想要做的是分离这些函数，以便我可以从每个单独页面的列表中调用它们，这将使我可以根据不同位置的需要替换某些函数的不同版本。像这样的事情:

function callList(){     
  one();
  //wait for one to finish  
  two();
  //wait for two to finish 
  three();
}

我花了很多时间阅读有关异步函数、回调、 promise 等的内容，但所提供的解决方案似乎仍然更多地处理显式地将函数链接在一起并传递单个变量作为函数已完成的证明，例如正如这个(写得很好)的例子:

https://flaviocopes.com/javascript-async-await/

我在找出正确的解决方案时遇到的困难部分是因为我的函数的目的各不相同。我的许多函数根本不生成变量，而那些生成变量的函数(单个 ajax 调用除外)会生成大量全局参数，这些参数不需要显式传递给下一个函数。事实上，大多数都专注于以各种方式渲染和操作 svg 和文本，并且由于显示数据的性质，许多都严重依赖循环。

与我遇到的大多数 JavaScript 问题一样，我确信这只是我理解上的差距，但我觉得我只是一遍又一遍地阅读相同的文章，却一无所获。我真的需要一个更有知识的人来插入我走向正确的方向。

谢谢。

Answer 1

函数是 Javascript 中的一等公民，因此您可以将它们放入数组中，然后循环并调用它们。

var functionsToCall = [
    one,
    two,
    three
];

// Call them (use your looping method of choice)
for (var i = 0; i < functionsToCall.Length; i++) {
    functionsToCall[i]();
}

如果您的函数是同步的并且没有返回您需要的任何内容，那么这基本上就是您所需要的。如果您的函数是异步的，那么您可能需要更像 awaitfunctionsToCall[i](); 的东西，或者使用 Promise/callbacks 的设置。

如果您需要回调来告诉您函数何时完成，您可以使用一个小型状态管理器/函数来处理它(或者如果您的环境支持它们，您可以使用 async/await - 它们写起来更干净! :) )。

类似...

// A sample async function - you pass the callback to it.
function one(callback) {
    // Do some async work, like AJAX...

    // Let the callback know when I'm finished (whether I have a value to return or not.
    callback();
}

// Simple state management - wrap these up with nicer code and handle errors and whatnot.
var funcIndex = 0;
function callNext() {
    if (funcIndex < functionsToCall.Length) {
        functionsToCall[funcIndex](callNext);
        funcIndex += 1;
    }
}

// To start things off:
function callAllFunctions() {
    funcIndex = 0;
    callNext();
}

如果您需要对函数调用进行更精细的控制，您可以将自定义对象放入数组中，而不仅仅是函数本身，并据此更改行为。

例如:

var functionsToCall = [
    { func: one, isAsync: true },
    { func: two, isAsync: false }
];

无论如何，只是一些可能性。这实际上取决于您的具体情况需要什么!