javascript - Wait before showing a loading spinner? - Stack Overflow

admin管理员组

文章数量:1430078

I want to use loading spinners in my single-page web application, which are easy enough to do if you want to show a spinner as soon as the request is fired and hide it as soon as the request is finished.

Since requests often only take a few hundred milliseconds or less to plete, I'd rather not show a spinner right away, but rather wait X milliseconds first so that, on those requests that take less than X milliseconds to plete, the spinner doesn't flash on the screen and disappear, which could be jarring, especially in times when multiple panels are loading data at once.

My first instinct is to use setTimeout, but I'm having trouble figuring out how to cancel one of multiple timers.

Would I have to create a Timer class so that I could stop and start different instances of a setTimeout-like object? Am I thinking about this from the wrong angle?

I want to use loading spinners in my single-page web application, which are easy enough to do if you want to show a spinner as soon as the request is fired and hide it as soon as the request is finished.

Since requests often only take a few hundred milliseconds or less to plete, I'd rather not show a spinner right away, but rather wait X milliseconds first so that, on those requests that take less than X milliseconds to plete, the spinner doesn't flash on the screen and disappear, which could be jarring, especially in times when multiple panels are loading data at once.

My first instinct is to use setTimeout, but I'm having trouble figuring out how to cancel one of multiple timers.

Would I have to create a Timer class so that I could stop and start different instances of a setTimeout-like object? Am I thinking about this from the wrong angle?

• javascript
• jquery

Share Improve this question Follow asked Jan 18, 2013 at 18:04 FrankFrank 94911 gold badge1212 silver badges1818 bronze badges 1

• setTimeout returns a timer id. You then pass that id to clearTimeout. – Joseph Silber Commented Jan 18, 2013 at 18:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

Then in your callback you can put:

clearTimeout(timer);
stopSpinner();

You could wrap setTimout and clearTimeout in some Timer class (I did) but you don't need to :)

Create your jquery function:

(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);

Usage:

$('#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

Demo:

• http://jsfiddle/4mVSK/1/

本文标签： javascriptWait before showing a loading spinnerStack Overflow