如何设置AJAX调用的最小持续时间

Question

我有一个网站，该网站拨打了Ajax调用，然后加载GIF在电视上显示静态。但是现在，Ajax调用并不需要足够的时间才能真正弹出。所以我想知道是否有办法设置Ajax呼叫将花费的最短时间？

您可以看到我正在尝试制作的网站，以更好地了解自己的工作。尝试单击右图或桌子上的留声机。

    <script type="text/javascript">
    var minDelay = 1000;
    var start = new Date();
    $.get("form.html", function(result) {
        callback($(result).find("#contact"));
        var end = new Date();
        var timeInMilliseconds = end - start;
        if (timeInMilliseconds  < minDelay) {
            setTimeout(function() { callback(result); }, minDelay - timeInMilliseconds );
        }
        else callback(result);
    });
    $.get("music.html", function(result) {
        callback($(result).find("#music"));
        var end = new Date();
        var timeInMilliseconds = end - start;
        if (timeInMilliseconds  < minDelay) {
            setTimeout(function() { callback(result); }, minDelay - timeInMilliseconds );
        }
        else callback(result);
    });

    function callback(result) {
        $("#screen").html(result);
    }
</script>

Answer 1

您可以为开始点和终点安排时间，然后添加另一个延迟，如果它低于某个阈值（使用setTimeout）。这样的东西：

var minDelay = 1000;
var start = new Date();
$.get(url, function(result) {
    var end = new Date();
    var timeInMilliseconds = end - start;
    if (timeInMilliseconds  < minDelay) {
        setTimeout(function() { callback(result); }, minDelay - timeInMilliseconds });
    }
    else callback(result);
});
function callback(result) {
    // Ajax response handling here ...
}

---

编辑我不确定您是否可以使用jQuery的load实现此目标（根据文档，目标在从服务器接收到响应后立即更新目标）。我建议将load调用转换为gets。即，这个：

$("#screen").load("form.html #contact");

应该成为这个：

$.get("form.html", function(result) {
    callback($(result).find("#contact"));
});

和上面我组成的callback功能应填充load的目标。

 function callback(html) {
     $("#screen").html(html);
 }

Answer 2

您可以在AJAX回调方法中使用setTimeout()方法模拟延迟？非常酷的网站btw！

示例代码：

var minDelay = 500;//half a second
setTimeout(DelayTimePassed, minDelay);
//make Ajax Call
function DelayTimePassed()
{
if(dataAvailable)
//show Data
else
//show data as soon as available
}
function AjaxCallback()
{
if(showDataAsSoonAsAvailable)
//Show Data Now
else
dataAvailable=true;//show data after time delay passes
}

希望对您有意义 - 两种方法检查了几个全局bool变量，以决定何时显示数据。