DELAYING JAVASCRIPT EVENT EXECUTION

Oct. 13, 2008 • Comments • 15,091 Views

If you're looking to execute javascript code whenever someone finishes (or stops temporary) scrolling, moving the mouse, or resizing the page, you may find the following code segment useful.

var onFooEndFunc = function() {
  var delay = 50; // Vary for effect
  var executionTimer;
  return function() {
    if (!!executionTimer) {
      clearTimeout(executionTimer);
    }
    executionTimer = setTimeout(function() {
      // YOUR CODE HERE
    }, delay);
  };
}();

Simulated onMouseMoveEnd:

onMouseMove onMouseMoveEnd
Executed 0 times.

Simulated onResizeEnd:

onResize onResizeEnd
Executed 0 times.

Simulated onScrollEnd:

onScroll onScrollEnd
Executed 0 times.
Scroll Me