javascript - 使用 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响应后。如果您不关心收到 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();
            }
        }
    }  
});