Question

好，所以我遇到了麻烦。我想利用CanvasJS利用来自一个数据源的数据创建多个图形。问题是我每60秒更新一次图形，并且当我运行update函数时，它最终为每个要更新的图形调用一次我的外部JSON，这是不理想的。因此，我尝试将事情放到单独的计时器循环上，每60秒设置setTimeout一次，但使用了两个不同的函数，它起作用了，但是我注意到有时更新的数据落后了将近2分钟，大概是1m 50s左右。这也不理想。我的代码很简洁，看起来像这样……

var updatedData = {}; // start empty

function updateData() {
    $.getJSON("/update.php", function (data) {
       updatedData = data; // new data for datapoints
    });
}

function makeGraph(dataValue, color) {
    // ... bunch of code here for making the graph and setting url's to use

    $.getJSON(url, function(data) { // bring in initial data
        $.each(data[dataType], function(k,v) {
            // handle data for each dataType setting datapoints to be graphed
        }
        linechart.render(); // create initial chart
    });

    function updateLineChart() { // ok let's update each chart...

        $.when(updateData()).done(function() {
            // use updated data for new set of datapoints
            linechart.render();// add new data to current chart
        }

        setTimeout(function() {
            updateLineChart(); // run update every 60 seconds
        }, 60000);
    }
    updateLineChart(); // initially run update
}

这很好用，但是不幸的是，它为正在渲染的每个图表调用update.php，而udpate.php实际上在每次调用时都会发送所有图表的数据，因此不需要将其称为3,4，每分钟5次以上。像这样调用数据时，数据会保持最新状态，并且在1分钟或实时范围内，因此准确性很高。

我已多次重做，以尝试通过许多不同的方法摆脱多余的呼叫。我所做的只调用一次，但很有可能出现数据滞后的情况，就像这样...

var updatedData = {}; // start empty

function updateData() {

    $.getJSON("/update.php", function (data) {
       updatedData = data; // new data for datapoints
    });

    setTimeout(function() {
        updateData(); // run data update every 60 seconds
    }, 60000);
}

updateData(); // run data update initially

function makeGraph(dataValue, color) {
    // ... bunch of code here for making the graph
    $.getJSON(url, function(data) { // bring in initial data
        $.each(data[dataType], function(k,v) {
            // handle data for each dataType setting datapoints to be graphed
        }
        linechart.render(); // create initial chart
    });

    function updateLineChart() { // ok let's update each chart...
            // use updated data for new set of datapoints
            linechart.render(); // add new data to current chart
        }
        setTimeout(function() {
            updateLineChart(); // run update every 60 seconds
        }, 60000);
    }
    updateLineChart(); // initially run update
}

通过这种方式，它们位于不同的setTimeout循环上，因此数据仍接近实时，但我注意到通常要落后整整两分钟。同样为了记录，我尝试设置一些便宜的技巧，例如创建新日期，查看日期是否与utcSeconds（0）匹配以及仅在日期不匹配时才获取update.php。它仍然多次获取update.php。

谁能想到一种使它们保持良好同步，运行多个图表并仅需一次调用即可获取数据的方法？我对此一无所有。

Answer 1

尝试这样的事情：

var timeoutId = undefined;//In global scope

//whenever you set new timeout first clear old one and then create new
if (timeoutId) {
    clearTimeout(timeoutId);
}
timeoutId = setTimeout(function() {
    updateData(); // run data update every 60 seconds
}, 60000);

HTH

Answer 2

您可以尝试以下方法：

    function updateData() {
       return $.getJSON("/update.php", function (data) {
          return data; // new data for datapoints
       });   
    }

    function updateLineChart(lineChartData) { 
        // use updated data for new set of datapoints
        linechart.render(); // add new data to current chart
    }

    function updateGraphs() {
        updateData().then(function(grphData){
            //foreach var crtData in grphData --> not sure who you key the data here                 in your response
        updateLineChart(grphData[cIndex])
        })
    }

    //initiallize with empty data
    //foreach var crtData in grphData --> not sure who you key the data here in your response
    updateLineChart({})

    setInterval(function() {
        updateGraphs(); // run data update every 60 seconds
    }, 60000);

Javascript的多功能setTimeout同步问题，还是有更好的方法？

2 个答案: