Question

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

我正试图让你的装载栏正常工作。

我发现了这个：

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;
            }

我添加了2行，因为它只能工作一次，因为隐藏值在完成后没有删除。同时将宽度调回0.我也喜欢它接缝计算事件的实际百分比。

这很有效。 Howerver，我想把它变成一个可以为我所有的ajax调用调用的函数：

$(document).ready(function () {
    $("a").on("click", function (event) {
        event.preventDefault();
        var id = ($(this).attr("id"));
        var container = ($(this).attr("data-container"));
        var link = ($(this).attr("href"));
        var text = ($(this).text());
        var html = ($(this).html());
        MY_LOADING_BAR_FUNCTION();<-----------------------------------Here i guess?
        $.ajax({

            url: 'ajax-php.php',
            type: 'post',
            data: { 'action': 'click', 'id': id, 'text': text, 'link': link, 'html': html },
            success: function (data, status) {
                if (container == '#formbox') {
                    $("#screen").addClass("visible");
                }
                $(container).html(data);
            },
            error: function (xhr, desc, err) {
                console.log(xhr);
                console.log("Details: " + desc + "\nError:" + err);
            }
        }); // end ajax call
    }); // end on click
}); // en document ready

但我也遇到过像这样的Ajax设置。

   $.ajaxSetup({
    beforeSend: function() {

    },
    complete : function() {

    }
});

现在我通过将xhr: function ()的整个代码放在我的ajax调用中来实现它。但我不想每次都这样做。

所以这些是我发现可以工作的两个选项，但我不能让它们以我想要的方式工作。我尝试制作MY_LOADING_BAR_FUNCTION()，但我收到了一个弃用的错误。

任何人都可以告诉我如何使这项工作。

谢谢大家！

Answer 1

回复已经很晚了，但是值得分享一些知识，所以其他人可能会从中得到帮助。

您可以扩展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;
}

Ajax加载栏功能

1 个答案: