だから私は毎分(または何でも)サーバーから数字のペアを受け取り、その分の間にdivを毎秒(または何でも)更新する小さなjavascriptアプリを持っているので、divに表示される値は最初の値から 2 番目の値。短いですが、質問の最後にコードを掲載します。
この関数には 2 つのサブ関数が含まれています。そのうちの 1 つは ajax 呼び出しを実行して 2 つの値を更新し、そのうちの 1 つは div の内容を 2 つの値の間の値で更新します。ajax 関数は setInterval を使用して、サーバーからの応答があるときに div 更新関数をスケジュールし、div 更新関数が 2 つの値を更新する時期であることを検出すると、設定された間隔をクリアして ajax 関数を呼び出します。このように、これら 2 つの機能は、永遠に相互に呼び出し続けます。
外側の関数の 2 つのサブ関数で使用されるすべての変数を宣言したので、どちらのサブ関数も新しい変数を作成せず、どちらのサブ関数も毎回完全に終了できます (ajax 関数の setInterval のおかげです)。
メモリ使用量はほぼ毎秒増加していますが、これは doDivRefresh が呼び出されるたびに発生する必要がありますが、呼び出されるたびに新しいメモリで何をしているのかわかりません。変数は作成されません。
ヘルプ!
/**
*
* Periodically gets the latest values for a stat and changes the contents of a
* div so that is ticks up from the previous value to the latest value
*
* @param divID
* The id of the div to update
* @param URL
* The URL that provides the values
* @param updateDivFrequency
* How often the value displayed in the div is updated, in
* miliseconds
* @param updateDataFrequency
* How often the underlying data is updated from the server, in
* seconds
*
*/
function updateStatOverPeriod(divID, URL, updateDivFrequency, updateDataFrequency)
{
var somethingDoer = new function()
{
};
var request = new XMLHttpRequest();
var currentValue = "";
var previousValue = "";
var latestValue = "";
var it = 0;
var currentTime = new Date();
var endTime = new Date().getTime();
function doDivRefresh(endTime)
{
if (currentValue != null)
{
currentValue = currentValue + it;
document.getElementById(divID).innerHTML = addCommas(parseInt(currentValue));
}
else
{
document.getElementById(divID).innerHTML = "<DIV CLASS=\"error_message\">No data</DIV>";
}
// If it's time to refresh the data end this loop and call the starting
// off method again
currentTime = new Date();
if (currentTime.getTime() >= endTime)
{
clearInterval(somethingDoer);
doAJAX();
}
}
function doAJAX()
{
// If browser supports javascript
if (window.XMLHttpRequest)
{
// Connect to the server and get the new pair of values
request = new XMLHttpRequest();
request.open('get', URL);
request.onreadystatechange = function()
{
// Once...
if (request.readyState == 4)
{
// we've got...
if (request.status == 200)
{
// the response
if (request.responseText)
{
// Parse the response and work out our iterator
previousValue = parseFloat(request.responseText.split("&")[0]);
latestValue = parseFloat(request.responseText.split("&")[1]);
if ((previousValue == 0) || (latestValue == 0))
{
it = parseFloat('0.00');
}
else
{
it = parseFloat((latestValue - previousValue) / (updateDataFrequency / updateDivFrequency));
}
// Set up the doRefreshDiv function in a loop that
// will exit and re-call this function
// once updateDataFrequency has elapsed
currentValue = previousValue;
endTime = new Date().getTime() + updateDataFrequency;
doDivRefresh(endTime);
somethingDoer = setInterval(function()
{
doDivRefresh(endTime);
}, updateDivFrequency);
alert("end of ajax response function()");
}
else
{
document.getElementById(divName).innerHTML = "<DIV CLASS=\"error_message\">Error - no data received from server</DIV>";
}
}
else
{
document.getElementById(divName).innerHTML = "<DIV CLASS=\"error_message\">Error - server returned " + request.status + "</DIV>";
}
}
};
request.send(null);
}
else
{
console.error("No window.XMLHttpRequest, does this browser support AJAX?");
}
alert("end of doAJAX()");
}
// Start
updateDataFrequency = updateDataFrequency * 1000;
doAJAX();
}