1

単一ページの Web アプリケーションで読み込みスピナーを使用したいと考えています。これは、リクエストが発生するとすぐにスピナーを表示し、リクエストが終了するとすぐに非表示にする場合に十分簡単です。

多くの場合、リクエストの完了には数百ミリ秒以下しかかからないため、すぐにスピナーを表示するのではなく、最初にXミリ秒待機して、完了するのに X ミリ秒未満かかるリクエストでスピナーが表示されないようにします。画面上で点滅して消えるため、特に複数のパネルが一度にデータを読み込んでいる場合に、耳障りになる可能性があります。

私の最初の本能はsetTimeoutを使用することですが、複数のタイマーの1つをキャンセルする方法を理解するのに苦労しています。

setTimeout のようなオブジェクトのさまざまなインスタンスを停止および開始できるように、Timer クラスを作成する必要がありますか? 私はこれについて間違った角度から考えていますか？

4

2 に答える 2

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

次に、コールバックに次のように入力できます。

clearTimeout(timer);
stopSpinner();

あなたはラップすることができsetTimout、clearTimeoutいくつかのTimerクラスで（私はしました）、しかしあなたはする必要はありません:)

于 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 に答える