JS Jitter (debounce) and throttling (throttle)

Preface

The story takes place in another tear forcing (daily), we firmly believe that: as a socialist successor, the limits of expenditure and the elimination of shaking is obvious, is not mixed dishes, is inviolable! The other side of the argument that the friend insisted: the boundary is vague, the behavior is ambiguous, gender can be ignored (...) ）。 In the spirit of all things to go to the graves, the two concepts carried out a profound socialist transformation.

definitionThrottle (Throttle)

Definition: If a function continues to trigger frequently, then let it be triggered after a certain interval of time.

Feel like to go to the line of security, when a lot of people (continue to enter the door), security will be placed in a few times a few to carry out security screening (a certain time interval).

anti-shake (debounce)

Definition: If a function continues to fire, it is only executed once after it has ended.

Like two people in the conversation, a in the constant Balabala (continuous trigger), if he spoke when there is a pause (a certain interval), but the pause time is not long enough to think that a is not finished, when the pause time more than a certain range think a said, then B began to answer (response).

Scene

The premise is that a behavior continues to trigger, and the difference is that the decision is to be optimized to reduce its number of executions or just one execution at a time.

For example, like the drag of the DOM, if the use of chatter, there will be a lag feeling, because only in the time of the execution of a stop, this time should be used to throttle, in a certain amount of time to execute, will flow a lot.

However, if it is input Lenovo this, I would like to enter "who is the most handsome person in the world?" ", many times, may be when I lose to the most time, go to search, the results of a bunch of" who is the world's most stupid "," who is the world's fattest "and the like unnecessary search, only need to search after the completion of the input, the most suitable for the elimination of shaking.

Implement

Understand the definition and the scene, let's take off our trousers and roll up our sleeves to build one.

First look at the famous artist

The realization of underscore

  //Returns a function, that, as long as it continues to be invoked, would not  //Be triggered. The function would be called after it stops being called for  //N milliseconds. If ' immediate ' is passed, trigger the function on the  //Leading edge, instead of the trailing._.debounce =function(func, wait, immediate) {vartimeout, result; varlater =function(context, args) {timeout=NULL; if(args) result =func.apply (context, args);    }; vardebounced = Restargs (function(args) {if(timeout) cleartimeout (timeout); if(immediate) {varCallnow =!timeout; Timeout=SetTimeout (later, wait); if(callnow) result = Func.apply ( This, args); } Else{Timeout= _.delay (later, wait, This, args); }      returnresult;    }); Debounced.cancel=function() {cleartimeout (timeout); Timeout=NULL;    }; returndebounced; };

  //Returns a function, that, when invoked, 'll only is triggered at the most once  //during a given window of time. Normally, the throttled function would run  //as much as it can, without ever going more than once per ' wait ' duration;  //but if you ' d like to disable the execution on the leading edge, pass  //' {leading:false} '. To disable execution on the trailing edge, ditto._.throttle =function(func, wait, options) {varTimeout, context, args, result; varPrevious = 0; if(!options) options = {}; varlater =function() {Previous= Options.leading = = =false? 0: _.now (); Timeout=NULL; Result=func.apply (context, args); if(!timeout) context = args =NULL;//display to release memory, prevent memory leaks}; varthrottled =function() {      varnow =_.now (); if(!previous && options.leading = = =false) Previous =Now ; varRemaining = wait-(now-previous); Context= This; Args=arguments; if(Remaining <= 0 | | remaining >wait) {        if(timeout) {cleartimeout (timeout); Timeout=NULL; } Previous=Now ; Result=func.apply (context, args); if(!timeout) context = args =NULL; } Else if(!timeout && options.trailing!==false) {Timeout=SetTimeout (later, remaining); }      returnresult;    }; Throttled.cancel=function() {cleartimeout (timeout); Previous= 0; Timeout= Context = args =NULL;    }; returnthrottled; };

Implements a more flexible option to control whether the execution is immediate, whether the doom is in the execution and increases the control logic of cancel. In the spirit of the Boulevard to Jane (in fact, lazy), we have to change a lite version only to achieve basic business.

Spit Groove

Red Book on the throttle example, uh ... How to say it ... It's a great shake-out, thanks!!!!!.

JS Jitter (debounce) and throttling (throttle)