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]();
}

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

如果您需要回调函数来告诉您函数何时完成，则可以使用小型状态管理器/函数来处理该事件（或者，如果您的环境支持它们，则可以使用异步/唤醒-编写起来更干净！ :)）。

类似...

// 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 }
];

无论如何，只有一些可能性。这确实取决于您在特定情况下的需求！

Answer 2

使用等待或

使用承诺

或

您需要function1执行完成处理程序将执行下一个处理程序

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

2 个答案: