在函数外访问 JS / jQuery 变量答案

【问题标题】：Accessing JS / jQuery variable outside function在函数外访问 JS / jQuery 变量
【发布时间】：2017-07-30 04:16:14
【问题描述】：

我正在尝试在函数内部声明一个变量，并希望使其在该函数外部可用。我已经浏览了几个 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 值正在更新或在函数外部不可用。我该怎么做？

【问题讨论】：

您在附加事件处理程序之后，在事件发生之前立即记录值。您是在问如何让变量预测未来？
你想达到什么目的？
$('#airline-select') 选择什么？我怀疑它给出了undefined，因为该元素尚未更改，它具有事件侦听器（更改时）。在这种情况下，因为您声明了var url（也就是说var url = undefined，所以记录url 应该正确地产生undefined
谢谢，我不太确定要修复它。我想要的是，这个 url 变量获取新值，我可以在函数之外使用这个 url 对象。
什么任务需要在事件处理程序之外执行？

标签： javascript jquery scope

【解决方案1】：

如果您希望在 document 已加载 DOM 和 #airline-select 在 document HTML。

您可以通过在函数声明中定义预期参数，在 change 事件处理程序中将 url 传递给 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()
    }
    //
})

【讨论】：

如果您希望change 事件立即发送，您可以将.change() 链接到$("#airline-select").change(function () { url = "{% url 'airline_year_financial_data' %}"; makeRequest(url) }).change()