jquery whenSlow

Execute a function (e.g. show loading status) when a jQuery Promise is slow.

23
0
JavaScript

jQuery.whenSlow

There has been lots of research into response times and progress indicators.

When you display a status indicator and your operation is pretty quick (<= 1 second), some sort of flickering occurs by showing/hiding the status indicator. This can feel like the application is glitchy. To prevent this, the status indicator should only be shown once the operation is taking long enough for the user to notice. This jQuery plugin helps with this problem.

Download

Grab the script, download the full repository or fork it on GitHub.

Use

var view = {
  showLoadingIndicator: function() {
    $(document.body).append('<span>Loading...</span>');
  }
};

// The first parameter to $.whenSlow is always a jQuery Promise.
var promise = $.ajax({ url: '/foo/bars' });

$.whenSlow(promise, function() {
  view.showLoadingIndicator();
});

// or

$.whenSlow(promise, 'showLoadingIndicator', view);

Configuration

You can change $.whenSlow.defaults.slow if you want to redefine the minimum duration of a slow operation.