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

不确定这是否适用于您的上下文，但我认为您应该立即使用＆＃34;请等待＆＃34;消息所以这就是代码可能的样子：

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

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

1 个答案: