javascript - API ajax 请求的进度条仅在从 API 获得响应后才开始加载

Question

我正在使用这个 jsFuddle http://jsfiddle.net/GvdSy/用于实现进度条。但问题是只有在我从 API 收到响应后才开始加载栏，而不是在我创建 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);
                }
           },
        });

Answer 1

$.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);
                    }
               },
            });