将数据从一个函数更新到另一个函数

Updating data from one function to another

本文关键字:函数 一个 更新 另一个 数据      更新时间:2023-09-26

我正在使用谷歌图表JS在我的网站上生成图表,但我遇到了一个问题,无法从不同的功能更新数据。

下面是示例代码:

google.setOnLoadCallback(test);
function test() {
    chart = new google.visualization.DataTable();
    chart.addColumn('string', 'Lorem');
    chart.addColumn('number', 'Ipsum');
    chart.addRows([
            ['', 0]
    ]);
        var chartOptions = {};
    var chartCreate = new google.visualization.LineChart(document.getElementById('chartDiv'));
          chartCreate.draw(chart, chartOptions);
    ]);
}
function test2() {
    chart.addRows([
        ['Uno', 123],
        ['Dos', 233],
        ['Tres', 12],
        ['Quatro', 231]
    ]);
    chartCreate.draw(chart, chartOptions);
}
setTimeout(test2(),5000)

如您所见,我将每 5 秒在 test2 函数中拥有新数据,我需要在函数测试中填充 Google 图表。 我不想将整个测试函数放入 test2 函数的原因是因为它会每 5 秒启动一个新的图表实例,这有点占用内存,因为内存不断增加。

如果有一种方法可以只向图表添加新行,那就太好了,但根据谷歌的文档,添加行的唯一方法是每次重新绘制图表。

它应该是:

setTimeout(test2, 5000)

setTimeout的第一个参数是一个函数。您正在调用该函数并将其结果(undefined,因为test2()不返回任何内容)传递给setTimeout

setTimeout接受函数引用。在调用中,您将使用 () 调用函数。 您只想传递函数的名称,以便 setTimeout 可以在以后(从现在起 5 秒)调用它,如下所示:

setTimeout(test2, 5000)

功能测试内部。这将确保在加载初始调用之前未设置计时器。

此外,请确保在第一个函数中为图表变量指定"var"关键字,否则您将创建一个全局变量(除非有意这样做)。

google.setOnLoadCallback(test);
function test() {
    var chart = new google.visualization.DataTable();
    chart.addColumn('string', 'Lorem');
    chart.addColumn('number', 'Ipsum');
    chart.addRows([['', 0]]);
    var chartOptions = {};
    var chartCreate = new         
    google.visualization.LineChart(document.getElementById('chartDiv'));
    chartCreate.draw(chart, chartOptions);
    setTimeout(test2,5000)
}
function test2() {
    chart.addRows([
        ['Uno', 123],
        ['Dos', 233],
        ['Tres', 12],
        ['Quatro', 231]
    ]);
    chartCreate.draw(chart, chartOptions);
}

你会遇到范围问题,因为该方法需要全局变量。 您可以通过将所有内容包装在一个函数中来避免全局变量的问题:

google.setOnLoadCallback(test);
function test() {
    var chart = new google.visualization.DataTable();
    chart.addColumn('string', 'Lorem');
    chart.addColumn('number', 'Ipsum');
    chart.addRows([
        ['', 0]
    ]);
    var chartOptions = {};
    var chartCreate = new google.visualization.LineChart(document.getElementById('chartDiv'));
    chartCreate.draw(chart, chartOptions);
    function test2() {
        chart.addRows([
            ['Uno', 123],
            ['Dos', 233],
            ['Tres', 12],
            ['Quatro', 231]
        ]);
        chartCreate.draw(chart, chartOptions);
    }
    setTimeout(test2, 5000);
}

setTimeout将在 5 秒后调用test2,但不是每 5 秒调用一次。 如果要每 5 秒重复一次,可以在 test2 函数结束时调用 setTimeout(test2, 5000);,也可以改用setInterval(test2, 5000);