场景:我上传图片到服务器,上传的时候显示一个上传进度,这个上传进度是随机出来的,如果上传成功后,就弹出一个alert,提示上传成功。
但是问题是每次都是进度条还没有显示完就会显示alert,我想是不是js操作dom是异步的,有没有什么办法使得js执行一步一步来呢??
DOM操作是同步的。你的进度条应该是使用了js来操作动效吧?这个过程可能是异步的。
另外提醒一下,如果开发时候前端与后端是在一台机器上,就是说你用localhost来做上传测试,进度条有可能出现瞬间走到头的情况,即使你设置了上传限速,如果怎么看代码都没问题,可以尝试远程测试
原始的xhr对象可以绑定回调,来获得百分比。
xhr.upload.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
}
}, false);
jq的话,使用beforeSend
属性获取原始xhr对象。
进度条的显示和隐藏跟普通的对话框逻辑一样,都是$.ajax
之前显示,ajax的success
和fail
中把它隐藏。
操作 DOM 不是异步的,但是你的进度条是异步的。
你应该绑定进度条的 complete/close/hidden/...
事件(如果有的话)。