我正在使用此jsFuddle http://jsfiddle.net/GvdSy/来实现进度条。但问题是只有在我从API获得响应后才开始加载bar,而不是在我创建API请求时 如何在我开始启动API调用(单击按钮)后立即开始加载进度条,并且只有在我从API获得响应后才能将其设置为100%,即进度条应与整个持续时间保持一致。
这是我使用的代码:
$.ajax({
cache: false,
type: "Post",
data: "",
async: true,
url: "/Apps/AddConnector?connectorId=" + connectorId + "&consumer=" + consumer,
xhr: function () {
var xhr = $.ajaxSettings.xhr();
xhr.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
progressBar.css({
width: percentComplete * 100 + '%'
});
}
}, false);
return xhr;
},
success: function (Response) {
if (Response.Status == "Success") {
try { mixpanel.track('Application', { 'App Id': connectorId }, { 'Action': 'added' }); } catch (ex) { }
try { ga('send', 'event', 'Applications', connectorId, 'apps_added'); } catch (ex) { }
progressLabel.text("Installed");
}
else {
progressLabel.text(Response.Message);
setTimeout(function(){flipInstance.slideToggle("slow");},2000);
}
},
error: function (xhr, e) {
if (!HandleAjaxError(xhr, e, "")) {
progressLabel.text(e);
}
},
});
答案 0 :(得分:0)
$.ajax({
cache: false,
type: "Post",
data: "",
async: true,
url: "/Apps/AddConnector?connectorId=" + connectorId + "&consumer=" + consumer,
xhr: function () {
var xhr = $.ajaxSettings.xhr();
xhr.addEventListener("progress", function (evt) {
if (evt.lengthComputable && evt.loaded) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
progressBar.css({
width: percentComplete * 100 + '%'
});
// HERE IS WHERE YOU IMPLEMENT AN ELSE, BEFORE evt.lengthComputable is truthy
} else {
progressBar.css({
width: '2%'
});
}
}, false);
return xhr;
},
success: function (Response) {
if (Response.Status == "Success") {
try { mixpanel.track('Application', { 'App Id': connectorId }, { 'Action': 'added' }); } catch (ex) { }
try { ga('send', 'event', 'Applications', connectorId, 'apps_added'); } catch (ex) { }
progressLabel.text("Installed");
}
else {
progressLabel.text(Response.Message);
setTimeout(function(){flipInstance.slideToggle("slow");},2000);
}
},
error: function (xhr, e) {
if (!HandleAjaxError(xhr, e, "")) {
progressLabel.text(e);
}
},
});