在显示加载微调器之前等待？

Posted 2023-03-15

【中文标题】在显示加载微调器之前等待？

【英文标题】：Wait before showing a loading spinner?

【发布时间】：2013-01-18 18:04:52

【问题描述】：

我想在我的单页 Web 应用程序中使用加载微调器，如果您想在请求触发后立即显示微调器并在请求完成后立即隐藏它，这很容易做到。

由于请求通常只需要几百毫秒或更短的时间即可完成，因此我宁愿不立即显示微调器，而是先等待 X 毫秒，这样对于那些花费更少的请求在 X 毫秒内完成，微调器不会在屏幕上闪烁并消失，这可能会令人不快，尤其是在多个面板同时加载数据的时候。

我的第一反应是使用 setTimeout，但我无法弄清楚如何取消多个计时器中的一个。

我是否必须创建一个 Timer 类才能停止和启动类似 setTimeout 的对象的不同实例？我是不是从错误的角度考虑这个问题？

【问题讨论】：

setTimeout 返回一个计时器 ID。然后将该 id 传递给clearTimeout。

【参考方案1】：

var timer = setTimeout(function () 
    startSpinner();
, 2000);

然后在你的回调中你可以放：

clearTimeout(timer);
stopSpinner();

您可以将setTimout 和clearTimeout 包装在一些Timer 类中（我做过），但您不需要:)

【讨论】：

修改多个微调器很容易。您可以通过多种方式实现它。您可以简单地将微调器全部放在 startSpinner 函数中。因为为什么你会有不同超时的微调器？从用户体验的角度来看，这很奇怪。如果微调器位于不同的“小部件”中，则它们不应由相同的代码控制。

1.为什么 Timer 类不是很好的 jquery 插件。 2. 假设用户点击 2 个按钮请求不同的 ajax 页面。一页已立即加载（无需微调器），第二页加载延迟。所以这里为什么你需要另一个超时

【参考方案2】：

创建你的 jquery 函数：

(function ($) 
  function getTimer(obj) 
    return obj.data('swd_timer');
  

  function setTimer(obj, timer) 
    obj.data('swd_timer', timer);
  

  $.fn.showWithDelay = function (delay) 
    var self = this;
    if (getTimer(this)) 
      window.clearTimeout(getTimer(this)); // prevents duplicate timers
    
    setTimer(this, window.setTimeout(function () 
      setTimer(self, false);
      $(self).show();
    , delay));
  ;
  $.fn.hideWithDelay = function () 

    if (getTimer(this)) 
      window.clearTimeout(getTimer(this));
      setTimer(this, false);
    
    $(this).hide();
  
)(jQuery);

用法：

$('#spinner').showWithDelay(100); // fire it when loading. spinner will pop up in 100 ms
$('#spinner').hideWithDelay();    // fire it when loading is finished
                                  // if executed in less than 100ms spinner won't pop up

演示：

http://jsfiddle.net/4mVSK/1/