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

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

2 Answers 2

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/