javascript - JQUERY AJAX ---- 出于可用性原因暂停但仅在必要时暂停？

Question

我有一个 LoadingStatus 函数，它有两个选项 SHOW 或 HIDE。

Show 在 JQUERY POST 时触发显示，HIDE 在 RESPONSE 返回后触发。

我遇到的问题是，有时这种情况发生得如此之快，以至于造成糟糕的体验。我想做的是放入一个 JavaScript PAUSE，但如果 POST 需要一段时间才能响应，那么由于 PAUSE，它会花费更长的时间。

如何让我的 SHOW HIDE 函数协同工作，以确保至少向用户显示 SHOW 至少 1/2 秒？

function saveBanner (action) {

    if (action == 'show') {
        // Display the AJAX Status MSG
        $("#ajaxstatus").css("display","block");
        $("#msg").text('Saving...');
    }
    else if (action == 'hide') {
        $("#ajaxstatus").css("display","none");
        $("#msg").text('');
    } 
};

谢谢

Answer 1

在您的 ajax 成功回调中，您可以将隐藏命令放在 setTimeout() 中 1500 毫秒:

success: function(results) {
  setTimeout(function(){
    saveBanner("hide");
  }, 1500);
}

当然，无论过程本身花费多长时间，这只会增加 1.5 秒。另一种解决方案是使用 Date 对象记录进程开始的时间。然后，当回调发生时，记录那个时间并找出差异。如果小于一秒半，设置差值超时。

/* untested */
var start = new Date();
success: function(results) {
  var stop = new Date();
  var difference = stop.getTime() - start.getTime();
  difference = (difference > 1500) ? difference : 1500 ;
  setTimeout(function(){
    saveBanner("hide");
  }, difference);
}

您可以在回调内或在 saveBanner() 函数本身内执行此数学运算，在您将设置开始时间的 show 部分内，在 hide() 部分，您将检查差异并设置 setTimeout()。