javascript - AJAX工作流程: How do I order the execution of these functions?

Question

我正在尝试找出让我的函数以正确的顺序执行的最佳方法。

我有3个功能

函数 1 - 通过 JSON 将 OPTION 注入(inject)到 SELECT 中并将它们标记为已选择
功能 2 - 将 OPTIONS 注入(inject)第二个 SELECT 并将它们标记为选定
函数 3 - 从上述 SELECT 中获取值以及一些其他 INPUT 值，执行 AJAX GET 生成 JSON 数据，该数据被读取并填充表。

使用 JQuery Onload，我执行:

function1();
function2();
function3();

我发现 function3 在用 OPTIONS 填充 SELECT 之前执行，因此表没有结果，因为 GET 中发送的值是空白。

我知道这可能是一个非常简单的问题，并且可能有十几种方法可以完成此任务，但基本上我需要最好的方法来编码，以便 function3 仅在 function1 和 2 完成时运行。

我是通过后门进入 Javascript 的，首先学习了 JQuery 的基础知识!

感谢您的帮助。

Answer 1

Javascript 同步执行，这意味着 function3 必须等待 function2 完成，而后者又必须等待 function1 完成才能执行。

异常(exception)情况是当您运行异步代码时，例如 setTimeout、setInterval 或异步 AJAX 请求。

任何依赖于此类异步代码完成的后续代码都需要以这样的方式调用:在异步代码完成之前它不会执行。

对于 setTimeout，您可以将下一个函数调用放在要传递给 setTimeout 的函数末尾。

对于 AJAX 调用，您可以将下一个函数调用放在回调中，该回调在完成请求时触发。

如果您不希望每次都执行后续函数，则可以修改函数以接受在异步代码末尾调用的函数参数。

类似于:

function function1( fn ) {
    setTimeout(function() {
        // your code 
        // Call the function parameter if it exists
        if( fn ) {
            fn();
        }
    }, 200);
}

function function2() {
    // some code that must wait for function1
}

加载:

// Call function1 and pass function2 as an argument
function1( function2 );

// ...or call function1 without the argument
function1();

// ...or call function2 independently of function1
function2();