加载第一个 JavaScript 函数后，使用 getJSON 调用第二个 JavaScript 函数答案

【问题标题】：Call second JavaScript function with getJSON after first one is loaded加载第一个 JavaScript 函数后，使用 getJSON 调用第二个 JavaScript 函数
【发布时间】：2019-09-17 14:25:30
【问题描述】：

我有多个函数，其中包含getJSON。我可以在加载第一个函数后调用/加载第二个函数吗？

现在首先调用第二个函数，然后加载第一个函数。无论如何我要完成加载第一个然后调用第二个。

我的 JavaScript

const functionOne = () => {
   $.getJSON(api, api_result => {
      $.getJSON(api2, api2_result => {
         build Highcharts
      });
   });
}

const functionTwo = () => {
   $.getJSON(api3, ap3_result => {
     build Highcharts
   });
   $.getJSON(api3, api3_result => {
     ...doSomething
   });
}

functionOne();
functionTwo();

现在 functionTwo() 正在首先加载（绘制高图），然后 functionOne() 正在加载，因为 getJSON 是异步的。无论如何要先在functionOne 中绘制我的highcharts，然后再转到functionTwo？

【问题讨论】：

看看promise 或jQuery deferred
看看这个stackoverflow.com/questions/57934513/…
$.getJSON(api3, ap3_result => { buildHighcharts; $.getJSON(api3, api3_result => { ...doSomething }); }); 或将第二个 get 放在 buildHighcharts 的末尾
虽然promises 是正确答案，但更简单、可能更容易理解的选项是传入回调：functionOne(functionTwo); 然后function functionOne(whenDone) { $.getJSON(api, function() { buildhighcharts(); whenDone(); }}
在调用functionTwo之前，当前存在的答案都不等待api2，所以要小心...

标签： javascript jquery json function asynchronous

【解决方案1】：

基于https://api.jquery.com/jQuery.getJSON/

类似以下内容？

【讨论】：

【解决方案2】：

虽然 Promise 很可能是这方面的“最佳”方法，但它们可能需要一段时间才能精通 - 在这种情况下，已经有一个嵌套的 ajax 调用，这肯定会使事情复杂化。

一个更简单、可能更容易理解的选项是传入回调：

function functionOne(callbackWhenComplete) {
   $.getJSON(api, api_result => {
      $.getJSON(api2, api2_result => {
         build Highcharts

         // Call callback, when everything else is complete
         callbackWhenComplete();
      });
   });
}

const functionTwo = () => {
   $.getJSON(api3, ap3_result => {
     build Highcharts
   });
   $.getJSON(api3, api3_result => {
     ...doSomething
   });
}

functionOne(functionTwo);

注意几点：

是functionOne(functionTwo) 不是 functionOne(functionTwo())

所以你将 functionTwo 函数本身作为回调传递，使用 functionTwo() 将首先调用 functionTwo 并传递结果

您可以/应该检查callbackWhenComplete 是否已通过，例如使用

if ($.isFunction(callbackWhenComplete)) callbackWhenComplete()

您可能想要一个比callbackWhenComplete 更好的变量名（仅作为示例）

【讨论】：

【解决方案3】：

使用 async/await，你可以确保第二部分的内容只有在 functionOne 完成时才会执行

async function functionOne () {
   await $.getJSON(api, async function(api_result) {
       await $.getJSON(api2, api2_result => {
         build Highcharts
      });
   });
}

async function functionTwo () {
   await $.getJSON(api3, ap3_result => {
     build Highcharts
   });
   await $.getJSON(api3, api3_result => {
     ...doSomething
   });
}

functionOne().then(functionTwo);

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：