Debounce

Defines and returns a function that should be called after a specified number of milliseconds, and only after the last time the function is invoked. Useful for responding to user gestures that may be repeated, such as window resizing or key presses for an autocomplete, so that the specified function will only execute after the last key has been pressed, or the browser resizing has stopped.

Arguments

callback (required) A function reference that will be called after the specified number of milliseconds has elapsed.

wait (required) The number of milliseconds to wait before executing the callback function.

scope (optional) The lexical scope in which the callback method should be executed.

Usage

The following example will apply a style to any element with a class of slider-js whenever the user resizes the browser window. By using debounce, the performance of the page is not compromised because even though the base event fires for every pixel that the user resizes the window, the function will not get called until 150 milliseconds after the last one is fired.

define(['jquery', 'lib/utils/debounce'], function ($, debounce) {
  "use strict";

  var resetSlider = function () {
    $('.slider-js').css({"transform": "none !important"});
  };

  $(window).resize(debounce(resetSlider, 150));
});