Optimization---function throttling/event dilution for JavaScript frequent firing event processing

Introduction: Yesterday interview when the interviewer asked how to implement a fixed navigation bar, after I answer the interviewer asked me what problems may exist, how to optimize?

I didn't answer the question very well, but I think there are two problems in retrospect:

1. After the Fixbar element is position:fixed, it will break out of the document stream, and the following elements will be followed, which may form a flicker, the workaround is to follow the element set Margin-top to the height of the Fixbar element, or replace the previous equal-height element, This interview was not described at the time.

2. This post is the main content "function throttling", English name throttle function, in some libraries, such as underscore has its implementation,

The main idea is: for the very frequent annoying launch event, you can set a certain time of the "buffer", in this certain time only to perform the last time response function.

For example, the window's scrollbar drag, the onscroll time is very frequent launch, if each launch is executed event handler, then will increase the browser burden, if 200ms (just for example) to execute once, then the performance will be improved, the effect is acceptable, Of course, practical applications need both to find a balance.

jquery author John resig The best practices for this issue in a 2011 blog post, please click on the original text to view. The code is as follows:

    varOuterpane = $details. Find (". Details-pane-outer")), Didscroll=false; $ (window). Scroll (function() {Didscroll=true;         }); SetInterval (function() {        if(didscroll) {Didscroll=false; //Check your page position and then            //Load in more results        }    }, 250);

Popularly referred to as function throttling/event dilution, in underscore, there is also this implementation:

Throttle _.throttle(function, wait, [options])
Creates and returns a new, throttled version of the passed function, that, when invoked repeatedly, would only actually CAL L The original function at most once per every waitmilliseconds. Useful for rate-limiting events, occur faster than you can keep up with.

By default, throttle would execute the function as soon as call it for the first time, and, if you cal L It again any number of times during the wait period, as soon as that period are over. If you ' d like to disable the Leading-edge call, pass {leading:false}, and if you ' d like to disable the EXECU tion on the Trailing-edge, pass
{Trailing:false}.

var throttled = _.throttle (updateposition,$); $ (window). Scroll (throttled);

The following is the specific implementation code:

_.throttle =function(func, wait, options) {varcontext, args, result; varTimeout =NULL; 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;    }; return function() {      varnow =_.now (); if(!previous && options.leading = = =false) Previous =Now ; varRemaining = wait-(now-previous); Context= This; Args=arguments; if(Remaining <= 0 | | remaining >wait)        {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;  }; };

Reference Links:

Learning from Twitter

Underscore.js

Optimization---function throttling/event dilution for JavaScript frequent firing event processing