javascript - 在函数外访问 JS/jQuery 变量

Question

我试图在函数内部声明一个变量，并希望它在该函数外部可用。我已经查看了几个 Stackoverflow 答案，但仍然无法弄清楚。

script>
    (function() {
        var url
        $("#airline-select").change(function () {
            url = "{% url 'airline_year_financial_data' %}";
        });
        console.log(url)
    var httpRequest;
    makeRequest();

    // create and send an XHR request
    function makeRequest() {
        httpRequest = new XMLHttpRequest();
        httpRequest.onreadystatechange = responseMethod;
        httpRequest.open('GET', url)
        httpRequest.send()
    }
    // Handle XHR Response
    function responseMethod () {
        if (httpRequest.readyState === 4) {
            if (httpRequest.status === 200) {
                updateUISuccess(httpRequest.responseText)
                } else {
                    // Do something
                }
        }
    }
    // Handle XHR Success
    function updateUISuccess(responseText) {
        var response = JSON.parse(responseText)
        var a = $("#airline-select").val();

        var width = 500;
        var height = 300;
        var padding = 20;
        d3.select("body")
            .append("svg")
                .attr("class", "waterfall-container")
                .attr("width", width)
                .attr("height", height)
                .attr("style", "outline: thin solid")
        d3.select("svg")
            .selectAll("rect")
            .data(response)
            .enter()
            .append("rect")
                .attr("x-axis", 200)
                .attr("y-axis", 300)
                .attr("width", 20)
                .attr("height", 200)
                .attr("fill", "blue")
    }

})();

</script>

它在控制台上记录“未定义”，这意味着函数内的 url 值正在更新或在函数外不可用。我该怎么做？

Answer 1

如果您希望调用 .ready() 的 jQuery() 别名，则在立即调用函数表达式之前缺少 $当 document 加载了 DOM 并且 #airline-select 在 HTML 的 document 中定义时。

您可以通过在函数声明中定义预期参数，将 url 传递给 change 事件处理程序中的 makeRequest()。

$(function() {

    var httpRequst, url;

    $("#airline-select").change(function () {
      url = "{% url 'airline_year_financial_data' %}";
      makeRequest(url)
    });

    // create and send an XHR request
    function makeRequest(url) { // include `url` parameter at function
        httpRequest = new XMLHttpRequest();
        httpRequest.onreadystatechange = responseMethod;
        httpRequest.open('GET', url)
        httpRequest.send()
    }
    //
})