Home > Developer > Web Develop
background: in front-end development, it is sometimes possible to bind a resize event for a page, or to drag an event for a page element (the core of which is binding MouseMove), which in a normal operation can trigger a very multiple event binder in a short period of time. Dom operations are very performance-intensive, if you are bound to these events to manipulate the operation of the DOM node will cause a large number of calculations, in the view of the user page may not respond to a time, the page becomes slow, even under IE, if the bound resize event for more Dom operation, Its high frequency may directly cause the browser to crash.
function throttling simply means that a function cannot be called consecutively within a short interval of time, and the next call to the function is made only after the last function has elapsed the interval you have specified.
Function throttling principle: With the timer, when triggering an event, the first settimout let this event delay a time to execute, if the event is triggered in this interval, then we clear off the original timer, and then settimeout a new timer delay to execute.
Advantages and Disadvantages
The function throttling described in the JavaScript advanced programming
functionThrottle (Method,context) {cleartimeout (Method,tid); Method.tid=settimeout (function() {method.call (context); },100);}//calledWindow.onresize=function() {throttle (myFunc);}//Law II:varthrottle=function(fn,delay) {varTimer=NULL; return function(){ varcontext= This, args=arguments; Cleartimeout (timer); Timer=settimeout (function() {fn.apply (Context,args);//The context calls the FN method, and the pointer points to the FN},delay); }}//calledWindow.onresize=throttle (myfunc,100);
Function throttling allows a function to stop only after you have been triggered and then start executing, in the middle of which you operate too quickly and ignore you directly. This is a bit too great, resize generally OK, but if you write a drag-and-drop element location of the program, and then directly use the function of the throttle, you will find that the element is not moving, you drag it directly to the end, so optimize:
varThrottlev2=function(fn,delay,mustrundelay) {varTimer=NULL; varT_start; return function(){ varcontext= This, args=arguments,t_curr=+NewDate (); Cleartimeout (timer); if(!S_start) {T_start=T_curr; }if(t_curr-t_start>=Mustrundelay) {fn.apply (Context,args); T_start=T_curr; }Else{Timer=settimeout (function() {fn.apply (Context,args); },delay); }}}window.onresize=throttlev2 (myfunc,50,100);
parsing : A continuous trigger call within a 50ms interval, followed by a call to dispose of the previous call, but executed at least once every 100ms.
1. tab switch case with throttling effect:
varTimer=NULL;functiontab (obj) {vartarget =document.getElementById (obj); varspans = Target.getelementsbytagname ("span"); varLis = Target.getelementsbytagname ("li"); for(vari=0;i<spans.length;i++) {Spans[i].onmouseover=function(num) {return function() {cleartimeout (timer); Timer=settimeout (function(){ for(varj=0; j<spans.length;j++) {Spans[j].classname= ""; Lis[j].classname= ""; } spans[num].classname= "Current"; Lis[num].classname= "Show"; },300); }} (i); Spans[i].onmouseout=function() {cleartimeout (timer); }}}tab ("One");
2. Screen scaling throttling case:
<body> <div id= "Demo" ></div></body>varDemo=document.getelementbyid ("Demo"); varNum=0; Window.onresize=throll (function() {demo.innerhtml=window.innerwidth | |Document.documentElement.clientWidth; Num++; alert (num); },300); functionThroll (fn,delay) {varTimer=NULL; return function() {cleartimeout (timer); Timer=setTimeout (Fn,delay); } }</script>
JS function throttling
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
