Javascript несколько функций синхронизации setTimeout, или есть лучший способ? - PullRequest
Новая
       27

Javascript несколько функций синхронизации setTimeout, или есть лучший способ?

0 голосов
/ 28 сентября 2018

Хорошо, у меня проблемы с чем-то.Я хочу создать несколько графиков с CanvasJS, используя данные из одного источника данных.Проблема заключается в том, что я обновляю графики каждые 60 секунд, и когда я запускаю функцию обновления, она вызывает мой внешний JSON один раз для каждого обновляемого графика, что не идеально.Поэтому я пытался помещать вещи в отдельные циклы таймера в setTimeout каждые 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 минуты или в режиме реального времени, поэтому точность хорошая.

Я повторял это несколько раз, пытаясь избавиться от лишних звонков черезмножество разных методов.То, что я сделал, которое вызывает его только один раз, но с большой вероятностью запаздывающих данных, выглядит так:в режиме реального времени, но я заметил, что это часто почти на две минуты позади.Также для записи я попытался установить дешевые приемы, такие как создание новых дат, проверка соответствия дат с помощью utcSeconds (0) и захват только update.php, если даты не совпадают безрезультатно.Он по-прежнему захватывает файл update.php несколько раз.

Может кто-нибудь придумать, как правильно синхронизировать их, запустив несколько диаграмм и совершив всего один вызов для получения данных?У меня заканчиваются идеи по этому вопросу.

Ответы [ 2 ]

0 голосов
/ 28 сентября 2018

Вы можете попробовать что-то вроде этого: 

    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);
0 голосов
/ 28 сентября 2018

Попробуйте что-то вроде этого: 

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

...