加載第一個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更好的變量名（僅作為示例）