Javascript Ajax加载条函数

我知道有一些关于这方面的帖子，但它们没有涵盖我需要实现的目标

我想让youtubelike加载杆正常工作

我发现：

var data = [];
for (var i = 0; i < 100000; i++) {
    var tmp = [];
    for (var i = 0; i < 100000; i++) {
        tmp[i] = 'hue';
    }
    data[i] = tmp;
};

       xhr: function () {
                var xhr = new window.XMLHttpRequest();
                var percentComplete = 0; <--------------------------added this
                $('.progress').removeClass('hide');<----------------and this
                xhr.upload.addEventListener("progress", function (evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = evt.loaded / evt.total;
                        console.log(percentComplete);
                        $('.progress').css({
                            width: percentComplete * 100 + '%'
                        });
                        if (percentComplete === 1) {
                            $('.progress').addClass('hide');
                        }
                    }
                }, false);
                xhr.addEventListener("progress", function (evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = evt.loaded / evt.total;
                        console.log(percentComplete);

                        $('.progress').css({
                            width: percentComplete * 100 + '%'
                            });
                    }
                }, false);
                return xhr;
            }

现在，我通过将

xhr:function（）

的整个代码放在我的ajax调用中来实现它。但我不想每次都这么做

这是我发现的两个可行的选择，但我不能让它们按照我想要的方式工作。我试图创建一个

MY\u LOADING\u BAR\u函数（）

，但我得到了一个不推荐的错误

有人能告诉我怎么做吗

---

谢谢大家

现在回复已经晚了，但是分享一些知识是值得的，这样其他人可能会从中得到帮助

您可以如下扩展jQuery AJAX XHR对象

jQuery.ajaxSettings.xhr = function ()
{
    var xhr = new window.XMLHttpRequest();
    //Upload progress
    xhr.upload.addEventListener("progress", function (evt) {
        if (evt.lengthComputable) {
            var percentComplete = evt.loaded / evt.total;
            //Do something with upload progress
            console.log('percent uploaded: ' + (percentComplete * 100));
        }
    }, false);
    //Download progress
    xhr.addEventListener("progress", function (evt) {
        if (evt.lengthComputable) {
            var percentComplete = evt.loaded / evt.total;
            //Do something with download progress
            console.log('percent downloaded: ' + (percentComplete * 100));
        }
    }, false);
    return xhr;
}

---

比如youtube？这不是一个单一的请求。这是许多要求。首先，所有请求都应添加到“队列”中。成功后，每个请求都应该更新加载栏。为了提高质量，你可以设置每个请求的百分比权重。啊，不！这是一个向php文件发送Json数组的请求！？

   $.ajaxSetup({
    beforeSend: function() {

    },
    complete : function() {

    }
});

jQuery.ajaxSettings.xhr = function ()
{
    var xhr = new window.XMLHttpRequest();
    //Upload progress
    xhr.upload.addEventListener("progress", function (evt) {
        if (evt.lengthComputable) {
            var percentComplete = evt.loaded / evt.total;
            //Do something with upload progress
            console.log('percent uploaded: ' + (percentComplete * 100));
        }
    }, false);
    //Download progress
    xhr.addEventListener("progress", function (evt) {
        if (evt.lengthComputable) {
            var percentComplete = evt.loaded / evt.total;
            //Do something with download progress
            console.log('percent downloaded: ' + (percentComplete * 100));
        }
    }, false);
    return xhr;
}