1

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

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

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

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

4

2 回答 2

2 
var timer = setTimeout(function () {
    startSpinner();
}, 2000);

然后在您的回调中，您可以输入：

clearTimeout(timer);
stopSpinner();

您可以在某些课程setTimout中进行包装（我做过），但您不需要:)clearTimeoutTimer

于 2013-01-18T18:06:42.890 回答
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

演示：

于 2013-01-18T18:12:22.150 回答