Question

基本上，有时我的应用程序中的AJAX调用太快，我需要延迟其中一些。我有一个“进度/加载”图标，当涉及快速AJAX调用时，图标出现并消失得太快。我需要一种方法来设置AJAX操作完成的最短时间（或至少以这种方式显示）。这是我在我的应用程序中使用的通用ajax函数。

var app = {
    ajax: function (paramObject) {
        $.ajax({
            url: paramObject.url,
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            type: paramObject.method || 'GET',
            data: paramObject.data || '{}',
            success: function (jsonResponse) {
                if (paramObject.success) {
                    if (paramObject.successDelay) {
                        setTimeout(function() {
                            paramObject.success(jsonResponse);
                        }, paramObject.successDelay);
                    } else {
                        paramObject.success(jsonResponse);
                    }
                }
            }
        });
    }
}

正如您所看到的，我有一个paramObject，其中包含以下参数：url，method，data，success和successDelay 。目前，AJAX调用需要时间，当它完成时，它会考虑我设置的延迟（successDelay）。但那不是我想要的。我想要的是跟踪AJAX调用开始和结束/成功之间的延迟，这样整个事情至少需要successDelay毫秒。

编辑进一步解释：

本质上，我希望看起来好像AJAX调用需要更长时间。它需要在我上面的函数中发生。

Answer 1

[编辑]

如果不了解您的代码，我认为这就是您想要的：

var app = {
    ajax: function (paramObject) {
        var timeStart = Date.now();
        $.ajax({
            url: paramObject.url,
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            type: paramObject.method || 'GET',
            data: paramObject.data || '{}',
            success: function (jsonResponse) {
                if (paramObject.success) {
                    if ((Date.now()-timeStart) < paramObject.successDelay) {
                        setTimeout(function() {
                            paramObject.success(jsonResponse);
                        }, paramObject.successDelay - (Date.now()-timeStart));
                    } else {
                        paramObject.success(jsonResponse);
                    }
                }
            }
        });
    }
}

不要延迟AJAX，只需检查是否删除等待或不延迟的动画类：

// before the AJAX call
var timeStartMs = Date.now();

// On the success block, we check if more or less than 500ms
// and we remove the '.waiting' class
if(Date.now() < timeStartMs + 500) 
    setTimeout(function(){ $('.target').removeClass('waiting'); }, 500);
else
    $('.target').removeClass('waiting');

像这样：

＆＃13;

var timeStartMs;

function f() {
  // before the AJAX call
  var timeStartMs = Date.now();

  var ping = Math.floor(Math.random() * 2000) + 1;
  $('#target').addClass('waiting');
  $('#target').html('Lag : '+ping);
  // fake AJAX call :
  setTimeout(function() {
    if (Date.now() < timeStartMs + 500)
      setTimeout(function() {
        $('#target').removeClass('waiting');
      }, 500);
    else
      $('#target').removeClass('waiting');
  }, ping);
}

＆＃13;

.waiting {
  background-color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target">Click</div>
<button onclick="f()">run</button>

＆＃13;

Answer 2

我没有测试过，但我相信它能做到你想要的。

var app = {
    ajax: function (paramObject) {
        var $d;
        if (paramObject.successDelay) {
            $d = $.Deferred();
            setTimeout(function() {
                $d.resolve();
            }, paramObject.successDelay);
        }
        $.ajax({
            url: paramObject.url,
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            type: paramObject.method || 'GET',
            data: paramObject.data || '{}',
            success: function (jsonResponse) {
                if (paramObject.success) {
                    if (paramObject.successDelay) {
                        $d.done(function(){
                            paramObject.success(jsonResponse);
                        });
                    } else {
                        paramObject.success(jsonResponse);
                    }
                }
            }
        });
    }
}

如何设置ajax请求开始与成功之间的最短时间？

2 个答案: