Differences of _.throttle and _.debounce in Underscore.js

Two methods are used to control the frequency of events, in such high frequency triggering events as mousemove,resize, the control of their response frequency can significantly improve the flow of the program, reduce the use of resources.

By analyzing its source code:

_.throttleMethod source Code

/** * Frequency control when a continuous call is returned from a function, the Func execution frequency is limited to times/wait * * @param {function} func passed in function * @param {number} wait represents time window Interval * @param {object} options if you want to ignore calls on the start boundary, pass in {leading:false}. * If you want to ignore the call on the end boundary, pass in {trailing:false} * @return {function} to return the client call function */_.throttl  E = function (func, wait, options) {var context, args, result;  var timeout = null;  Last execution time point var previous = 0;  if (!options) options = {};    Deferred execution function var later = function () {//If the start boundary is set to not execute option, the last execution time is always 0 previous = Options.leading = = = False? 0: _.now ();    timeout = null;    result = func.apply (context, args);  if (!timeout) context = args = null;  };    return function () {var now = _.now ();    When first executed, the last execution time is set to the current time if the start boundary is set to not execute option.    if (!previous && options.leading = = = False) previous = now;    Delay execution time interval var remaining = wait-(now-previous);    context = this;    args = arguments; The delay interval remaining is less than or equal to 0, indicating that the last time elapsed to this interval has exceeded one time window//REMaining is greater than the time window wait, indicating that the client system time has been adjusted if (remaining <= 0 | | remaining > Wait) {cleartimeout (timeout);      timeout = null;      previous = now;      result = func.apply (context, args);    if (!timeout) context = args = null; If deferred execution does not exist, and no end bounds are set, the option} else if (!timeout && options.trailing!== false) {timeout = SetTimeout (later    , remaining);  } return result; };};

_.debounceMethod source Code

/** * Idle control return function Continuous call, idle time must be greater than or equal to Wait,func to execute * * @param {function} func pass in function * @param {number} wait table  The time window interval * @param {Boolean} immediate is set to Ture, the call fires at the start boundary instead of the end boundary * @return {function} returns the client call function */_.debounce   = function (func, wait, immediate) {var timeout, args, context, timestamp, result;     var later = function () {//According to last trigger time interval var = _.now ()-timestamp; The last time the wrapper function was called is less than the set time interval, wait, {timeout = setTimeout {0}} (later, wait-    last);      } else {timeout = null;        If set to Immediate===true, because the start boundary has already been called, there is no need to call if (!immediate) {result = Func.apply (context, args);      if (!timeout) context = args = null;   }    }  };    return function () {context = this;    args = arguments;    timestamp = _.now ();    var callnow = immediate &&!timeout;    If the delay does not exist, reset the delay if (!timeout) timeout = SetTimeout (later, wait); if (callnow) {result = Func.apply (cOntext, args);    context = args = null;  } return result; };};

_.throttle like a throttle valve, in the preset time, no matter how many times the event triggered, only one time, while the _.debounce is like an elevator, only if the interval of two events triggered is greater than the preset time, the event will be triggered. If someone comes in the elevator, start waiting. If another person comes in, re-timer waits until more than the preset time, start to execute

Reprint Source: http://www.cnblogs.com/lingtong/p/4072869.html

Differences of _.throttle and _.debounce in Underscore.js