javascript - 如何动态设置 AJAX 加载栏的动画直至其达到 100%？

Question

这是我上一个问题 "How do I measure a loading time of an AJAX request and display a loading panel?" 的后续问题。现在我想知道如何显示这样的动画加载栏/面板:

我的意思是实际的面板从 0% 移动到 100%。我这里有一些代码来开始讨论。我正在实现一个从这个精彩的 site 加载的教程.

    $("#connection").click(function(e) {
        e.preventDefault();
        //show_loading();
        $.ajax({
            url: "./home/connect",
            type: 'GET',
            dataType: 'json', 
            progress: function(jqXHR, progressEvent) {
                if (progressEvent.lengthComputable) {
                    console.log("Loaded " + (Math.round(progressEvent.loaded / progressEvent.total * 100)) + "%");
                } else {
                    console.log("Loading...");
                }
            },
            success : function(data) {
                //hide_loading();
                Materialize.toast(data.db_connect, 4000, 'rounded green');
            },
        });
    });

此代码的问题在于，当达到 100% 时，它会在控制台中显示 100%，而不是实时显示(显示从 0 - 100 的实际计数)。

Answer 1

我在官方文档中没有看到任何 progress 函数，但我找到了这段代码 here :

$.ajax({
    url: path,
    xhrFields: {
        onprogress: function (e) {
            if (e.lengthComputable) {
                console.log(e.loaded / e.total * 100 + '%');
            }
        }
    },
    success: function (response) {

    }
});