javascript - 加载第一个 JavaScript 函数后，使用 getJSON 调用第二个 JavaScript 函数

Question

我有多种功能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 是异步的。反正有没有先画我的highchartsfunctionOne然后继续functionTwo？

标签： javascriptjqueryjsonfunctionasynchronous

Answer 1

虽然 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（仅用于示例）