JavaScript function throttle and function shake

Introduced

First explain the two concepts:

function throttling (throttle): A function cannot be called consecutively within a short interval of time, and the next call to the function is made after the last function has been executed at a specified interval.

function Jitter (debounce): Allows a function to execute the called method only if it has not been called within a certain interval.

Two methods are used to improve front-end performance and reduce browser pressure.

Application

It's a little hard to understand and easy to understand through application. Typically, we add events where there is user interaction, and often this event is triggered frequently.

• Imagine the window of the resize event or an element of the onmousemove event, resize will change the browser big thing continuous trigger, onmousemove will be in the mouse movement is continuously triggered, if your callback is too heavy, you may cause the browser to die.
• Imagine that you need to work on the text when the user enters a text, you listen to the text changes, each time the change will call a callback function, in fact, I need to be in the user input to stop the time to process.
• In the shooting game you want to launch only one bullet within 1s, not the user launches every time you launch it.

There are many similar applications, the difference between throttle and debounce is that in frequent callbacks, throttle runs at a certain frequency, and debounce runs after frequent callbacks. In general, filter frequently triggered event callbacks so that they are executed when they are really needed, both of which are chosen according to the application scenario.

Realize

Said so much, how to use debounce and throttle function, great http://underscorejs.org to us to achieve the two methods, the implementation of both methods are not dependent on other underscore methods, So we can easily add them to other JavaScript libraries, like jquery.

Debounce

For the time being, immediate is not considered, and it is interesting to study.

The basic idea of function shaking is: wrapping the function that needs to be shaken, using the closure record timeout, the first callback to the function to set the settimeout timer, as long as within the wait time, the last callback will cleartimeout cancel the execution of the previous callback.

_.debounce = function (func, wait, immediate) {    var timeout, result;    return function () {      var context = this, args = arguments;      var later = function () {        timeout = null;        if (!immediate) result = func.apply (context, args);      };      var callnow = immediate &&!timeout;      Cleartimeout (timeout);      Timeout = SetTimeout (later, wait);      if (callnow) result = func.apply (context, args);      return result;};  

Throttle

The basic idea of the function throttling is to ignore the browser's callback and execute the code at a certain frequency.

_.throttle = function (func, wait) {    var context, args, timeout, result;    var previous = 0;    var later = function () {      previous = new Date;      timeout = null;      result = func.apply (context, args);    };    return function () {      var now = new Date;      var remaining = wait-(now-previous);      context = this;      args = arguments;      if (remaining <= 0) {        cleartimeout (timeout);        timeout = null;        previous = now;        result = func.apply (context, args);      } else if (!timeout) {        timeout = setTimeout (later, remaining);      }      return result;};  

JavaScript function throttle and function shake