如何在 xmlHttpRequest 正确显示进度条？答案

【问题标题】：How to show progress bar while xmlHttpRequest properly?如何在 xmlHttpRequest 正确显示进度条？
【发布时间】：2016-10-18 14:08:01
【问题描述】：

问题是当我试图显示进度条（只是 .gif）时，我看不到它。使用 chrome 开发工具逐步执行时。我看到了。当没有断点运行时，我不会。似乎它在开始请求之前没有设法绘制 gif，但我不明白为什么。代码如下：

startLoadingAnimation();
var bill = model.save(data);
stopLoadingAnimation();

startLoadingAnimation(); 在哪里：

function startLoadingAnimation()
{
    var imgObj = $("#loadImg");
    imgObj.show();

    var centerY = $(window).scrollTop() + ($(window).height() + imgObj.height())/2;
    var centerX = $(window).scrollLeft() + ($(window).width() + imgObj.width())/2;

    imgObj.offset({top:centerY, left:centerX});
    }

而stopLoadingAnimation() 是：

function stopLoadingAnimation() 
{
    $("#loadImg").hide();
}

model.save(data) 终于去了

SOAPClient._sendSoapRequest(url, method, parameters, async, callback, wsdl, forseArray);

【问题讨论】：

model.save() 是一个异步调用...它将执行该函数，然后立即调用 stopLoadingAnimation。可能是现有异步问题的“重复”。
@BryanRay 但 _sendSoapRequest 中的异步为 false 或者它仍然是异步的？
它是异步的……它会触发那个 HttpRequest，然后继续它的业务……

标签： javascript xmlhttprequest progress-bar

【解决方案1】：

您最好的选择可能是让您的保存方法将 callback 函数作为第二个选项......然后将其传递给您的 _sendSoapRequest callback 参数，然后您可以利用您的 @ 987654324@函数。

伪代码

var bill = model.save(data, { callback: function() { stopLoadingAnimation(); } });

您需要修改现有的 .save() 函数以处理选项的第二个参数（如果它尚未接受某些内容）。

【讨论】：