XmlHttpRequest onprogress 间隔

IT技术 javascript ajax xmlhttprequest
2021-03-03 01:44:52

我正在使用 XmlHttpRequests 将图像上传到服务器,我想向用户显示这些上传的进度。

不幸的是,对我的 onprogress-event 处理程序的调用间隔太大。对于 500k 图像,通常 onprogress 只调用一次或两次。

这是我的代码:

/* This function is not called often enough */
function progress(e){
    console.log('Uploading: ' + Math.round((e.loaded / e.total) * 100) + ' %');
}

var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', progress, false);
xhr.send(data);

可以更改此行为还是在浏览器实现中的某处进行硬编码?

2个回答

W3 在其XMLHttpRequest Level 2文档中阐述了以下指南显然,不同浏览器的一致性水平是可以预期的。

上传:

当请求实体正文正在上传并且上传完成标志为 false 时,将一个任务排队,以大约每 50 毫秒或传输的每个字节(以频率最低者为准)在 XMLHttpRequestUpload 对象上触发一个名为 progress 的进度事件- W3 XMLHttpRequest Level 2(加粗以示强调)

下载:

当说要发出进度通知时,在下载进行时,将任务排队以大约每 50 毫秒或接收到的每个字节触发一个名为 progress 的进度事件,以频率最低的为准- W3 XMLHttpRequest Level 2(加粗以示强调)

我不知道可以自定义此功能的 api。

@SamBull 很高兴知道!我一直在绞尽脑汁想弄清楚为什么我的 10, 9, 8, ... 倒计时测试在完全完成之前不会触发任何进度指示器!
2021-04-21 01:44:52
@SamBull 嗯,不幸的是,即使我发送 100 个字节,然后在 10 秒内每秒发送一个字节,在所有内容都已传输之前,我仍然没有收到任何进度指示器!
2021-04-26 01:44:52
好的,自从测试以来,在过去的几周内,Chrome 似乎已经改变了行为,现在需要 1024 字节。我已经调整了该脚本,因此您可以查看浏览器是在 69 还是 1024 处触发。
2021-05-04 01:44:52
谢谢你。出于某种原因,我从未想过要检查规格。
2021-05-11 01:44:52
在 3 个不同的浏览器中尝试过,似乎直到从服务器接收到至少 69 字节的数据后才会触发进度事件。之后,它可以用每个额外的字节触发。浏览器似乎按照这个标准运行,但只有在接收到前 69 个字节之后。
2021-05-15 01:44:52

此外,请注意本地调试 HTTP 代理(例如 Charles)往往会影响进度事件触发间隔。