jQueryを使用して別のAPI呼び出し内でAPIを呼び出す

Question

ボタンをクリックしたときに関数をトリガーしようとしています。

私は、1つのAPIを別のAPI呼び出しの中にネストしました。最初の呼び出しではデータの応答が得られ、そこで最初の呼び出しで受け取った応答を使用して2番目の呼び出しを行います。 2番目の呼び出しの後、ボタンをクリックしたときに呼び出される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応答がそれぞれ受信された後、前にクリックイベントを処理するために2つのイベントハンドラを使用して です。 APIの応答を受け取る前にボタンのクリックを気にしない場合は、最初のイベントハンドラを省略できます。あなたが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... 
     }); 
    }); 
}); 

：ここでは一例である

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