加载第一个JavaScript函数后，使用getJSON调用它

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

现在，由于getJSON是异步的，因此首先加载functionTwo() （绘制高图），然后再加载functionOne() 。 无论如何，有没有要先在functionOne绘制高图，然后再转到functionTwo ？

Answer 1

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

类似于以下内容？

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

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

functionOne();

Answer 2

使用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); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Answer 3

虽然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更好的变量名（仅作为示例）