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

Posted 2023-02-24

【中文标题】等待模态显示时进度条的最佳实践

【英文标题】：Best practice for a progress bar while waiting on a modal to display

【发布时间】：2018-06-26 15:44:39

【问题描述】：

我有一个在线应用程序，其功能包括右键单击一个值并在一个小的浮动模式框中返回一些 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 构建模式。在那段短暂的时间里，我想显示某种指标，表明它正在工作。时间最多只有几秒钟，所以我不是在寻找进度条，而是在寻找旋转的沙滩球或类似的东西。

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

【参考方案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.');
            
        );
    );

【讨论】：

我非常喜欢这个解决方案。它很简单，并且完全符合我现在所知道的我想要的。哈哈