-1

我有 ajaxloader 显示并像这样隐藏在我的 ajaxsetup 中

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

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

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

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

所以基本上它延迟了ajax调用而不仅仅是延迟动画，因为我也不知道ajax请求完成并且动画仍然存在

4

3 回答 3

1

由于我一直不清楚您到底要做什么，所以这里有一个解决方案，它执行以下操作：

  1. 您只能更改 jQuery ajax 基础结构 - 您无法更改所有 ajax 调用者，因此您希望在不更改调用代码的情况下从 ajax 函数中执行操作。
  2. 当一个ajax调用开始时，立即提出进度，但是延迟发送ajax请求1.5秒。
  3. 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 延迟，这将起作用。如果使用了这些，则需要编写一个更复杂的解决方案来阻止成功处理程序和完成处理程序。

编辑：这些是了解问题所在的较早尝试：

要确保通知在屏幕上显示的时间最短，您可以这样做：

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 秒延迟）。

于 2012-10-11T03:45:31.887 回答
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)只要你需要它就打电话。

于 2012-10-11T03:41:15.703 回答
0

处理 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 加载器

于 2013-08-05T09:32:21.217 回答