Javascript 多个XMLHttpRequest.send或eventlisteners内存泄漏?
我目前正在实现文件的上传。因为我需要处理大量文件,所以我开始对文件进行切片,并将其分为1mb块发送,只要文件Javascript 多个XMLHttpRequest.send或eventlisteners内存泄漏?,javascript,object,events,memory,memory-leaks,Javascript,Object,Events,Memory,Memory Leaks,我目前正在实现文件的上传。因为我需要处理大量文件,所以我开始对文件进行切片,并将其分为1mb块发送,只要文件\u offset+=length是一个或多或少明显的错误为什么xhr是一个全局变量?我很确定你不是有意的。@Bergi\u offset+=length是一个复制粘贴错误,最好是一段旧代码,但谢谢你告诉我。xhr只是试图找到我的漏洞,并使代码保持最新(我想,全局与否对我的漏洞没有影响),但将其编辑回了局部变量。这里也有同样的问题。可能与?@gpalomar有关。我已经更改了代码,并发送了
\u offset+=length
是一个或多或少明显的错误为什么xhr
是一个全局变量?我很确定你不是有意的。@Bergi\u offset+=length
是一个复制粘贴错误,最好是一段旧代码,但谢谢你告诉我。xhr只是试图找到我的漏洞,并使代码保持最新(我想,全局与否对我的漏洞没有影响),但将其编辑回了局部变量。这里也有同样的问题。可能与?@gpalomar有关。我已经更改了代码,并发送了与WebWorkers同步的块,因此整个上传都只有一个对象,即使图形不再显示泄漏,问题仍然是一样的。然而,我能够在IE上重现类似的错误。
var sliceCount = 0;
var sendCount = 0;
var fileID = generateUUID();
var maxChunks = 0;
var userNotified = false;
function parseFile(file)
{
var fileSize = file.size;
var chunkSize = 1024 * 1024;//64 * 1024; // bytes
var offset = 0;
var self = this; // we need a reference to the current object
var chunkReaderBlock = null;
var numberOfChunks = fileSize / chunkSize;
maxChunks = Math.ceil(numberOfChunks);
// gets called if chunk is read into memory
var readEventHandler = function (evt)
{
if (evt.target.error == null) {
offset += evt.target.result.byteLength;
sendChunkAsBinary(evt.target.result);
}
else
{
console.log("Read error: " + evt.target.error);
return;
}
if (offset >= fileSize) {
console.log("Done reading file");
return;
}
// of to the next chunk
chunkReaderBlock(offset, chunkSize, file);
}
chunkReaderBlock = function (_offset, length, _file)
{
var r = new FileReader();
var blob = _file.slice(_offset, length + _offset);
sliceCount++;
console.log("Slicecount: " + sliceCount);
r.onload = readEventHandler;
r.readAsArrayBuffer(blob);
blob = null;
r = null;
}
// now let's start the read with the first block
chunkReaderBlock(offset, chunkSize, file);
}
function sendChunkAsBinary(chunk)
{
var progressbar = $("#progressbar"), bar = progressbar.find('.uk-progress-bar');
// create XHR instance
var xhr = new XMLHttpRequest();
// send the file through POST
xhr.open("POST", 'upload.php', true);
var progressHandler = function (e)
{
// get percentage of how much of the current file has been sent
var position = e.loaded || e.position;
var total = e.total || e.totalSize;
var percentage = Math.round((sendCount / maxChunks) * 100);
// set bar width to keep track of progress
bar.css("width", percentage + "%").text(percentage + "%");
}
// let's track upload progress
var eventSource = xhr.upload || xhr;
eventSource.addEventListener("progress", progressHandler);
// state change observer - we need to know when and if the file was successfully uploaded
xhr.onreadystatechange = function ()
{
if (xhr.readyState == 4)
{
if (xhr.status == 200)
{
eventSource.removeEventListener("progress", progressHandler);
if (sendCount == maxChunks && !userNotified)
{
userNotified = true;
notifyUserSuccess("Datei hochgeladen!");
setTimeout(function ()
{
progressbar.addClass("uk-invisible");
bar.css("width", "0%").text("0%");
}, 250);
updateDocList();
}
}
else
{
notifyUser("Fehler beim hochladen der Datei!");
}
}
};
var blob;
if (typeof window.Blob == "function") {
blob = new Blob([chunk]);
} else {
var bb = new (window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder)();
bb.append(chunk);
blob = bb.getBlob();
}
sendCount++;
var formData = new FormData();
formData.append("chunkNumber", sendCount);
formData.append("maxChunks", maxChunks);
formData.append("fileID", fileID);
formData.append("chunkpart", blob);
xhr.send(formData);
progressbar.removeClass("uk-invisible");
console.log("Sendcount: " + sendCount);
}