等待模态显示时进度条的最佳实践

Question

我有一个在线应用程序，其功能包括右键单击一个值并在一个小的浮动模式框中返回一些 PHP/MySQL 检索到的信息。 Javascript 函数如下所示；

function getCallHistory() {
    $('tr').on('contextmenu', 'td', function(e) { //Get td under tr and invoke on contextmenu

        e.preventDefault(); //Prevent defaults'
            var idparm = $(this).attr('id');
            var arparm = idparm.split(":");
            var id     = arparm[1];
                id     = id.replace(/\s+/g, '');
            var call   = $(this).html();
            var call   = call.replace(/\s+/g, ''); // remove spaces
                    //Look for slash or dash (/,-, or any special character)
                    var vals = [call].map((item) => item.split(/\W+/,1));
                    var call = vals[0];

        $.ajax({
            type: "GET",
            url: "getCallHistory.php",  
            data: {call : call, id : id},
            success: function(response) {

                $("#lli").html(response);  // Writes to the lli DIV at the bottom of index.php

                $("#lli").modal();  // Opens the modal dialog box
            },
            error: function() {
                alert('Last Query Failed, try again.');
            }
        });
    });
}

有时 MySql 需要几秒钟才能返回并使用 PHP 构建模式。在那段短暂的时间里，我想显示某种指标，表明它正在工作。时间最多只有几秒钟，所以我不是在寻找进度条，而是在寻找旋转的沙滩球或类似的东西。

有没有比其他人更好的方法来做到这一点？某个地方的例子？

Answer 1

不确定这是否适用于您的上下文，但我认为您应该立即使用“请稍候”消息显示模式，因此代码可能如下所示：

function getCallHistory() {
    $('tr').on('contextmenu', 'td', function(e) { //Get td under tr and invoke on contextmenu

        // Show the modal right away with a message
        $("#lli").html('Loading fresh call history, please wait...');
        $("#lli").modal();

        e.preventDefault(); //Prevent defaults'
            var idparm = $(this).attr('id');
            var arparm = idparm.split(":");
            var id     = arparm[1];
                id     = id.replace(/\s+/g, '');
            var call   = $(this).html();
            var call   = call.replace(/\s+/g, ''); // remove spaces
                    //Look for slash or dash (/,-, or any special character)
                    var vals = [call].map((item) => item.split(/\W+/,1));
                    var call = vals[0];

        $.ajax({
            type: "GET",
            url: "getCallHistory.php",  
            data: {call : call, id : id},
            success: function(response) {

                // Overwrite the waiting message
                $("#lli").html(response);  // Writes to the lli DIV at the bottom of index.php

                $("#lli").modal();  // Opens the modal dialog box
            },
            error: function() {
                alert('Last Query Failed, try again.');
            }
        });
    });
}