代码如下:
function refreshContent(id) {
function imageLoaded(){
//get device div
var device_div = document.getElementById("device-" + id);
//remove old image, if there is one
if(device_div.hasChildNodes())
delete device_div.removeChild(device_div.lastChild);
device_div.appendChild(image);
var device_id = device_div.id.split("-")[1]; //divs are named "device-<something>"
window.setTimeout(refreshContent, 5000, device_id);
}
var image = new Image();
image.src = SERVER_BASE_URL + "/api/test/" + id + "/image/" + new Date().getTime();
image.addEventListener("load", imageLoaded);
}
根据 Chrome 任务管理器,内存使用量在运行时会快速增长,而在禁用它时则不会,因此我知道这部分代码正在泄漏。
我的一些想法:
- 我没有正确删除对旧图像的所有引用,因此孤立的 Image 对象正在堆积。
- 对 setTimeout 的递归调用会将旧的函数调用保留在内存中。
我尝试过的一切似乎都没有效果。
最佳答案
您应该在事件监听器被调用后立即将其删除。
function refreshContent(id) {
function imageLoaded(){
image.removeEventListener("load", imageLoaded);
//get device div
var device_div = document.getElementById("device-" + id);
//remove old image, if there is one
if(device_div.hasChildNodes())
delete device_div.removeChild(device_div.lastChild);
device_div.appendChild(image);
var device_id = device_div.id.split("-")[1]; //divs are named "device-<something>"
window.setTimeout(refreshContent, 5000, device_id);
}
var image = new Image();
image.src = SERVER_BASE_URL + "/api/test/" + id + "/image/" + new Date().getTime();
image.addEventListener("load", imageLoaded);
}
忘记取消注册事件监听器是内存泄漏的一个常见原因。
关于javascript - 如何修复这个 Javascript 内存泄漏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26090413/