Javascript多功能设置超时同步问题，还是有更好的方法？

好吧，我有点问题。我想使用CanvasJS创建多个图形，利用来自一个数据源的数据。问题是，我每60秒更新一次图形，当我运行update函数时，它最终会为正在更新的每个图形调用一次外部JSON，这并不理想。所以我试着把东西放在单独的计时器循环上，每60秒设置一次超时，但是在两个不同的函数上，它工作了，但是我注意到有时候更新的数据几乎落后2分钟，比如说落后1米50秒左右。这也不理想。我的代码非常简洁，看起来像这样

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

---

有人能想出一种方法让他们很好地同步，运行多个图表，并且只打一个电话来获取数据吗？关于这一点，我已经没有什么想法了。

试试这样的方法：

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

您可以尝试以下方法：

    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);

---

虽然这不能完全按原样工作，因为有些函数是嵌套的，我知道你要用它，让我试试，我会让你知道的。谢谢你的主意！做这件事的聪明方法！