Question

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

由于请求通常只需要几百毫秒或更短的时间才能完成，我宁愿不立即显示一个微调器，而是先等待 X 毫秒，以便在那些少花钱的请求上旋转器不会在X毫秒内完成，并且不会在屏幕上闪烁并消失，这可能会产生震动，尤其是在多个面板同时加载数据的情况下。

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

我是否必须创建一个Timer类，以便我可以停止并启动类似setTimeout的对象的不同实例？我是从错误的角度思考这个问题吗？

Answer 1

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

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

clearTimeout(timer);
stopSpinner();

你可以将setTimout和clearTimeout包裹在某些Timer课程中（我做过），但你不需要：）

Answer 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/

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

2 个答案: