Javascript 使用jQuery在另一个API调用中调用API

我试图在单击按钮时触发一个函数

我编写的所有东西都是将一个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处理程序？如果是这样，我如何从外部调用它？

为了在页面加载后立即设置事件处理程序，

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...');

        }
    }  
});

另一种方法是使用两个事件处理程序在和之前处理click事件 在分别接收到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请求，可以将它们移动到事件处理程序中（此处使用另一个函数以使其更清楚）：

---

triggerButton

处理程序只是一个函数，它与所有其他JS函数一样具有正常的作用域规则。但我不完全理解你的问题。你的代码很奇怪。您想仅在单击按钮后发出AJAX请求吗？然后，只需将所有代码（除了

$（“#按钮”）。在（'click'，triggerButton）

上插入

triggerButton

函数即可。很抱歉，我的段落质量很差，我正在努力学习。我不想在单击按钮时实际调用ajax，我只想更改Html中的一个变量，具体来说，将一个元素中的温度值从华氏度更改为摄氏度，反之亦然。感谢您的时间和支持，我非常感谢。您知道，我正在尝试将数据响应保存在变量中的方法，但是当我在代码console.log（webData）的末尾调用该变量时，显示的值为“null”，就像函数中没有修改变量一样。你有什么想法吗？再次感谢你的帮助。我不清楚你的问题。我做了一份报告，可能对你有帮助。

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