使用jQuery在另一個API調用中調用API

Question

我試圖在單擊按鈕時觸發一個函數。

我寫了一切嵌套在另一個API調用中的一個API。對於第一個電話，我收到了數據的響應，然後在第一個電話中使用收到的響應進行第二個電話。在第二次調用之後，我設置了當按鈕被點擊時將被調用的triggerButton函數。

這是代碼的一個例子：

$(document).ready(function(){ 
    $('#button').on('click', triggerButton); 

    $.getJSON('http://example.com', function(data){ 

    //inside this function I call another api using the data response. 
    $.get('example.url', function(response){ 

     //do something with this data of the response and ended function 
    }); 
    // now I set a new handler 
    function triggerButton() { 

     // do something 

    } }); 
});  

我應該將所有的功能外triggerButton處理？如果是這樣，我怎麼能在我的處理程序中使用API​​調用響應的所有信息（因爲我需要它來比較變量）。或者我應該在內部API函數內部創建triggerButton處理程序？如果是這樣，我怎麼能從外面打電話呢？

Answer 1

爲了在頁面加載後立即設置事件處理程序，triggerButton的定義應放置在「api函數」之外。這是您的問題的可能解決方案。

$(document).ready(function(){ 
    var webData = null; 
    $.getJSON('http://example.com', function(data){ 

     //inside this function I call another api using the data response. 
     $.get('example.url', function(response){ 
      //do something with this data of the response and ended function 
     }); 

     // expose the data to be used by button click event hander or other 
     // funcitons that care about the data 
     webData = data; 
    }); 

    // Set the event handler 
    $('#button').on('click', triggerButton); 
    // define the handler 
    function triggerButton() { 
     if(webData){ 
      // do something with the webData 

     }else{ 
      // display some information that tells the user the status 
      alert('loading...'); 

     } 
    } 
}); 

另一種方法是使用兩個事件處理程序來處理API響應分別接收之前和之後 click事件。如果您在接收API響應之前不關心按鈕點擊，則可以省略第一個事件處理程序。這裏有一個例子：

$(document).ready(function(){ 
    // Set the event handler before resource is loaded 
    $('#button').on('click', triggerButton); 
    // define the handler 
    function triggerButton() { 
     // display some information that tells the user the status 
     alert('loading...'); 
    } 

    $.getJSON('http://example.com', function(data){ 
     //inside this function I call another api using the data response. 
     $.get('example.url', function(response){ 
      //do something with this data of the response and ended function 
     }); 

     // update the event handler 
     $('#button').off('click', triggerButton).on('click', function(){ 
      // do some things... 
     }); 
    }); 
}); 

此外，如果你想要的API請求點擊按鈕後發送，您可以移動它們的事件處理中（這裏使用另一個函數以使其更清晰）：

$(document).ready(function(){ 
    var webData = null; 
    var loading = false; 

    function loadData(){ 
     $.getJSON('http://example.com', function(data){ 
      //inside this function I call another api using the data response. 
      $.get('example.url', function(response){ 
       //do something with this data of the response and ended function 
      }); 

      // expose the data to be used by button click event hander or other 
      // funcitons that care about the data 
      webData = data; 
     }); 
    } 

    // Set the event handler 
    $('#button').on('click', triggerButton); 
    // define the handler 
    function triggerButton() { 
     if(webData){ 
      // do something with the webData 

     }else{ 
      // display some information that tells the user the status 
      alert('loading...'); 
      if(!loading){ 
       loading = true; 
       loadData(); 
      } 
     } 
    } 
});