There is a function that draws a graph of the resulting array using AJAX.

// ********************************** startUpdate ******************************** // function startUpdate() { fetchData(); data = []; alreadyFetched = {}; $('#average').hide(); var currentTemperatureHolder = $('.currentTemperatureHolder'); function fetchData() { function beforeSendFunc() { tempSpan.hide(); lastUpdateTimeHolder.hide(); preloaderHolder.show(); } function completeFunc(answer_code) { if(answer_code.responseText === 'DATA IS EMPTY') { alert('Данные отсутствуют'); return; } } function showData() { tempSpan.show(); lastUpdateTimeHolder.show(); preloaderHolder.hide(); return true; } function onDataReceived(series) { $('.tempSpan').text(series[+series.length - 1][1]); var lastUpdateTime = new Date(+series[+series.length - 1][0] - 10800000); var hours = lastUpdateTime.getHours() < 10 ? '0' + lastUpdateTime.getHours() : lastUpdateTime.getHours(); var minutes = lastUpdateTime.getMinutes() < 10 ? '0' + lastUpdateTime.getMinutes() : lastUpdateTime.getMinutes(); var seconds = lastUpdateTime.getSeconds() < 10 ? '0' + lastUpdateTime.getSeconds() : lastUpdateTime.getSeconds(); var lastUpdateTime = hours + ':' + minutes + ':' + seconds; $('.lastUpdateTime').text(lastUpdateTime); showData(); data = [ series ]; $.plot("#placeholder", data, options); } $.ajax({ url: './getTemperature.php', beforeSend: beforeSendFunc, complete: completeFunc, success: onDataReceived }); } setInterval(fetchData, 5000); }

I want in this function displays the time before the update, that is, displays in the timer 5, 4, 3, 2, 1 - the Ajax request went, arrived, brought the data, and went 5, 4, 3 ...

Tried it differently, but the number of calls to the timer function is growing exponentially. From the example, removed the timer function so as not to frighten the public.

I would be grateful for the correct decision and even a hint.

  • If anyone is interested, then this is a graph that shows the curve of temperature changes in the server room. - Anton

2 answers 2

Let's speculate together) The first thing that came to mind was to hang up another timer in parallel with fetchData, but there is no guarantee that the answer will be sent instantly because of this and it follows that we cannot do the correct timer. BUT in your condition there is a wonderful remark and in the ajax request there is a preloader (beforeSendFunc ()). As a result, we do the following, we launch in parallel with the main timer another one, which will be launched once every 1000 ms and which will execute the counter 5..4..3..2 .. when the counter is equal to 0, you can wait for the response from the function beforeSendFunc () can be used to more rigidly say the beginning of the request, and in onDataReceived () we again give the counter the value 5

  • Something like this solved the problem, but really it was not an easy task, it took 2 days to solve it, couldn't sleep - it turned over :) - Anton
  • @Anton, I'm glad you solved the problem) was glad to help - lazyproger
  // ********************************** startUpdate ******************************** // function startUpdate() { timeToRefresh.show(); data = []; alreadyFetched = {}; $('#average').hide(); var currentTemperatureHolder = $('.currentTemperatureHolder'); function fetchData() { function beforeSendFunc() { $('#timeToRefresh').hide(); tempSpan.hide(); lastUpdateTimeHolder.hide(); preloaderHolder.show(); } function showData() { $('#timeToRefresh').show(); tempSpan.show(); lastUpdateTimeHolder.show(); preloaderHolder.hide(); } function onDataReceived(series) { $('.tempSpan').text(series[+series.length - 1][1].toFixed(1)); $('.tempSpan').append('&#176;C'); var lastUpdateTime = new Date(+series[+series.length - 1][0] - 10800000); var hours = lastUpdateTime.getHours() < 10 ? '0' + lastUpdateTime.getHours() : lastUpdateTime.getHours(); var minutes = lastUpdateTime.getMinutes() < 10 ? '0' + lastUpdateTime.getMinutes() : lastUpdateTime.getMinutes(); var seconds = lastUpdateTime.getSeconds() < 10 ? '0' + lastUpdateTime.getSeconds() : lastUpdateTime.getSeconds(); var lastUpdateTime = hours + ':' + minutes + ':' + seconds; $('.lastUpdateTime').text(lastUpdateTime); showData(); data = [ series ]; $.plot("#placeholder", data, options); } $.ajax({ url: './getTemperature.php', type: "post", beforeSend: beforeSendFunc, success: onDataReceived }); } function startTimer() { if(icycle === 0) { icycle = 61; fetchData(); } var my_timer = $('#timeToRefresh'); var time = my_timer.innerHTML; icycle --; icycle = icycle < 10 ? '0' + icycle : icycle; my_timer.text(icycle); icycle =+ icycle; } setInterval(startTimer, 1000); }