如果调用需要较长时间，如何在 ajax 上显示消息"Sorry it is taking time to load"

Question

假设有我的ajax调用调用我的PHP函数来获得一些结果。

$('.ui-loader').show();
$.ajax({
        url: BASE_URL +'some_page.php',
        type: 'POST',
        datatype: 'json',
        async:false,
        success: function (response) {
             // response will get my result from "somepage.php"
             $('.ui-loader').hide();
        },
        error: function (jqXHR, textStatus, errorThrown) {
            //alert(jqXHR.status);
        }
    });

我如何显示另一个加载器，该加载器指出当 ajax 响应需要时间才能获得结果时"Sorry it is taking time please wait"？

我遇到了ajaxStart（）和ajaxStop（），但我怎么能在这里使用？你们能不能指导我实现这件事。

注意：$('.ui-loader').show();是一个简单的加载器，我想隐藏这个加载器并显示另一个说"对不起，这需要时间，请稍候"。

提前谢谢。

Answer 1

您可以使用

如下setTimeout来做到这一点：

var longWaitTimerId = setTimeout(function () {
    //took longer than 5 seconds
}, 5000);
$.ajax({
    ...
    success: function (response) {
        clearTimeout(longWaitTimerId);
        ...
    },
    error: ... same as above
});

Answer 2

function MakeAjaxCall(){
//timer to show another loader
var timer = window.setTimeout(function(){
        $('.ui-loader').hide();
        $('.ui-AnotherLoader').show();
    }, 2000);
$('.ui-loader').show();
$.ajax({
    url: BASE_URL +'some_page.php',
    type: 'POST',
    datatype: 'json',
    async:false,
    success: function (response) {
          //clear the timer if ajax call take less time
          wiundow.clreatTimeout(timer);
         // response will get my result from "somepage.php"
         $('.ui-loader').hide();
         $('.ui-AnotherLoader').hide();
    },
    error: function (jqXHR, textStatus, errorThrown) {
        //alert(jqXHR.status);
    }
});
}