所以我有一个小的 javascript 应用程序，它每分钟（或其他）从服务器接收一对数字，并且在一分钟的过程中，它每秒（或其他）更新一个 div，以便 div 中显示的值逐渐从第一个值到第二个。它很短，我将在问题底部发布代码。
该函数包含两个子函数 - 其中一个执行 ajax 调用以更新两个值，其中一个使用两个值之间的某个值更新 div 内容。ajax 函数在收到服务器响应时使用 setInterval 来安排 div 更新函数，当 div 更新函数检测到需要更新这两个值时，它会清除设置的间隔并调用 ajax 函数。因此，这两个函数永远互相调用。
我在外部函数中声明了两个子函数使用的每个变量，因此两个子函数都不会创建任何新变量，并且无论如何都允许两个子函数每次都完全完成（感谢 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();
}