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

8gsdolmq  于 2021-06-21  发布在  Mysql
关注(0)|答案(1)|浏览(256)

我有一个在线应用程序,它的功能包括右键单击一个值,并在一个小的浮动模式框中返回一些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构建模态。在这短短的时间里,我想显示一些指标,它的工作。时间很短,最多只有几秒钟,所以我不是在寻找一个进度条,而是一个旋转的沙滩球或同等的。
有没有比其他人更好的方法来实现这一点?某个地方的例子?

iqih9akk

iqih9akk1#

不确定这是否适用于您的上下文,但我认为您应该立即显示带有“请稍候”消息的模态,因此代码的外观如下:

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.');
            }
        });
    });
}

相关问题