Question

我有ajaxloader show并隐藏在我的ajaxsetup中，就像这样

beforeSend:function(xhr, settings){
$('.loader').show();

 complete:function(){
         $('.loader').hide();

现在请求发生得非常快，我的动画只加载不到秒。

有什么方法可以让一些延迟让动画在那里停留3秒然后div得到更新。

所以基本上它延迟ajax调用不仅仅是推迟动画，因为我也不知道ajax请求是否完成且动画仍在那里

Answer 1

您可以延迟在客户端隐藏加载程序或者让服务器休眠。

在JavaScript中：

setTimeout(function(){ $('.loader').hide() }, 3000)

或者在回显结果之前在PHP中使用：

sleep(3)

假设PHP但其他语言具有相同的功能，可能命名不同。请记住，3秒的睡眠时间与响应时间不同。

修改：如果您想延迟到整个请求，请尝试以下操作：

function request(delay) {
  // beforeSend logic here
  $('.loader').show();
  setTimeout(function(){
    $.ajax({
      ...
      complete: function() { $('.loader').hide(); }
      ...
    });
  }, delay);
}

然后只需在需要时拨打request(delay)即可。

Answer 2

由于我从未清楚地知道你究竟想要做什么，所以这里有一个解决方案，可以做到以下几点：

您只能更改jQuery ajax基础结构 - 您无法更改ajax的所有调用者，因此您希望在不更改调用代码的情况下从ajax函数中执行操作。
当ajax调用开始时，立即启动进度，但延迟发送ajax请求1.5秒。
当ajax调用完成后，隐藏进度状态。

以下是代码：

// save old function
$.ajaxOld = $.ajax;

// install our global status hide handler
$.ajaxSetup({
    complete: function() {
        $('.loader').hide();
    }
});

// replace ajax call with our own that adds the delay
$.ajax = function() {
    // save state from the original function call for use later
    var args = [].slice.call(arguments);
    var self = this;

    // show progress immediately
    $('.loader').show();

    // call the original ajax function in 1.5 seconds
    setTimeout(function() {
        $.ajaxOld.apply(self, args);
    }, 1500)
}

警告 - 只要没有调用$.ajax()期望它返回jqXHR对象并且没有使用ajax deferreds，这将有效。如果使用了这些，那么需要编写一个更复杂的解决方案来阻止成功处理程序和完成处理程序。

编辑：这些是较早的尝试，以了解问题是什么：

要确保通知在屏幕上显示的时间最短，您可以执行以下操作：

beforeSend:function(xhr, settings){
    xhr.startTime = new Date().getTime();
    $('.loader').show();

complete:function(xhr){
    var elapsed = new Date().getTime() - xhr.startTime;
    if (elapsed < 3000) {
        $('.loader').delay(3000 - elapsed).hide(1);
    } else {
        $('.loader').hide();
    }

这将跟踪消息在屏幕上显示的时间长度，如果ajax调用快速进行，它将延迟隐藏消息，直到3秒钟过去。如果ajax调用没有快速进行并且消息已经显示足够长的时间，它将在ajax调用完成时隐藏它。

如果您想要做的是延迟加载内容并且您正在complete处理程序中处理结果，那么您可以这样做：

function finishMyAjax(xhr) {
    // load your ajax content
    $('.loader').hide();
}

    beforeSend:function(xhr, settings){
        xhr.startTime = new Date().getTime();
        $('.loader').show();

    complete:function(xhr){
        var elapsed = new Date().getTime() - xhr.startTime;
        var self = this;
        var args = [].slice.call(arguments);
        if (elapsed < 3000) {
            setTimeout(function() {
                finishMyAjax.apply(self, args);
            }, 3000-elapsed);
        } else {
            finishMyAjax.apply(this, arguments);
        }

如果你没有在完整的处理程序中处理ajax的结果，那么请包含处理结果的代码，这样我就可以将它包含在这个想法中。这里的一般想法是你记录ajax调用开始的时间。如果ajax响应出现时间不到3秒，则在3秒内为剩余时间设置一个计时器，并在计时器回调中完成响应。如果它超过3秒，那么你就可以继续正常处理结果。

这使您可以永远不会使用超过预期的时间，但始终至少需要3秒。你可以延迟启动ajax调用3秒钟，但是如果ajax调用需要6秒才能得到结果，整个过程将需要9秒，这不是你想要的。在我的方案中，如果ajax结果需要1秒，您将延迟处理它直到3秒。如果ajax结果需要6秒，结果将在它进入时立即处理（没有额外的3秒延迟）。

Answer 3

处理ajax请求时显示ajax加载程序的最佳方法

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function loadXMLDoc() {
    document.getElementById("loader").style.display="inline";
    var xmlhttp;
    if (window.XMLHttpRequest) {
      xmlhttp=new XMLHttpRequest();
      }
    else{
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        document.getElementById("loader").style.display="none";
        }
      }
    xmlhttp.open("GET","yourRequestController",true);
    xmlhttp.send();
    }
    </script>
    </head>
    <body>
    <div  id="loader" style="display:none">
    you are seeing this MSG becoz our ajax loader is processing ,
    it will automatically hide when your ajax request is completed
 // place your ajax loader imagae rather than showing a msg
    </div>
    <div id="myDiv">Content Before</div>
    <button type="button" onclick="loadXMLDoc()">Change Content</button>

    </body>
    </html>

其w3schools.com ajax示例，我刚修改代码以显示ajax loader

我如何延迟ajax请求，以便我的ajax加载器停留更长时间

3 个答案: