javascript - undefined variable javascript；虽然实际定义

Question

我在使用此代码时遇到问题:

google.charts.load('current', {
    packages: ['corechart', 'line']
});
google.charts.setOnLoadCallback(drawBasic);

function time(dati) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            dati = [];
            dati.push(JSON.parse(this.responseText));
            console.log(dati); //logs perfectly fine
            return dati;
        };
    };
    xmlhttp.open("GET", "graph-data.php", true);
    xmlhttp.send();
};
time();
console.log(dati); // logs nothing

function drawBasic(dati) {

    var data = new google.visualization.DataTable();
    data.addColumn('number', 'X');
    data.addColumn('number', 'Prijs');

    console.log(dati); //logs nothing

    data.addRows(dati);

    var options = {
        hAxis: {
            title: 'Time'
        },
        vAxis: {
            title: 'Prijs'
        }
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

    chart.draw(data, options);
}

变量未定义。我如何定义它们？

Answer 1

您收到该错误是因为 dati 是一个未声明的变量，您试图获取第 17 行的值:

console.log(dati);

该代码出现的范围内没有 dati 标识符。您的 time 函数内有一个 dati 参数，但这仅位于您的 time 函数内；上面的线在它的外面。

解决该问题后，您的下一个问题将在此处解决:How do I return the response from an asynchronous call? time 启动异步操作，当 time 返回时该操作尚未完成。

您似乎还期望 setOnLoadCallback 将某些内容传递给您的 drawBasic 函数:

google.charts.setOnLoadCallback(drawBasic);

我找不到它的文档(!!)，但是this page's examples不显示它所调用的函数接受任何参数。

<小时/>

有点猜测，但我怀疑你想做这样的事情；请参阅内嵌评论:

// A scoping function so we don't create globals
(function() {
    // Variables for the data and a loaded flag
    var dati = null;
    var loaded = false;

    // A function we can call from both async operations to see if both have completed
    function checkReady() {
        if (dati && loaded) {
            // They're both done, we can draw
            drawBasic(dati);
        }
    }

    // Load charts and get callback when done
    google.charts.load('current', {
        packages: ['corechart', 'line']
    });
    google.charts.setOnLoadCallback(function() {
        loaded = true;
        checkReady();
    });

    // Load our data
    function time() { // <== Note no `dati` parameter, we want to use the variable declared above
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                // Fill in the data -- are you sure you really want an array with the data
                // as its only entry?
                dati = [];
                dati.push(JSON.parse(this.responseText));

                // If we're ready, draw
                checkReady();
            };
        };
        xmlhttp.open("GET", "graph-data.php", true);
        xmlhttp.send();
    };
    time(); // Start the data load

    function drawBasic(dati) {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'X');
        data.addColumn('number', 'Prijs');

        console.log(dati); //logs nothing

        data.addRows(dati);

        var options = {
            hAxis: {
                title: 'Time'
            },
            vAxis: {
                title: 'Prijs'
            }
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

        chart.draw(data, options);
    }
})(); // The end of the scoping function, and `()` to invoke it

我确信这并不完美，但希望它能让您走上正确的道路。