JS function throttling

We know that JS some events such as Resize,mousemove will be triggered continuously, such as our simple one Scroll event:

function SCROLLFN () {    console.log (1)}window.onscroll=SCROLLFN

We need to do something at the time of scrolling, as we can see, we are simply the console, and the function executes nearly 20 times during a rolling process, and if the function has more complex methods, such as manipulating the DOM or other interactions, it will seriously affect performance. To avoid this problem, we typically use timers to throttle functions.

The basic idea of function throttling is to set a timer, clear the last timer when running code within a specified time interval, and set another timer, knowing that the function request stops and exceeds the time interval to execute.

In JavaScript advanced programming, a method is defined, as follows:

function Throttle (Method,context) {    cleartimeout (method.tid);    Method.tid=settimeout (function() {        Method.call (context)    })}

The throttle function receives two parameters, that is, the function to execute and the execution environment, which is windows by default if the execution environment is undefined. In this function, at the first execution of the method to the top of a timer property, in the specified time interval (300) to execute again when the timer is clearly defined and create a new timer know to stop.

function SCROLLFN () {    console.log (1)}function  throttle (method,context) {    Cleartimeout (Method.tid);    Method.tid=settimeout (function() {        Method.call (context)    })} Window.onscroll=function() {    throttle (SCROLLFN)}

There is also a solution on the Web:

function Throttle (Method,delay) {    var timer=null;     return function () {        var context=This, args=arguments;        Cleartimeout (timer);        Timer=settimeout (function() {            method.apply (Context,args);        },delay);}    }

The result of the invocation is the same as the first result, which effectively prevents the function from repeating the call, but the first one sets the timer to a property of the function, and the second scheme is implemented by the closure. First define a variable in the function timer, and then return a function, we know that because the return function contains a reference to the timer, so the timer is not immediately cleared. (We can also define a timer as a global variable.)

There is a problem with the above two scenarios, that is, if the event has been triggered, then the function will never be executed, which at some point does not meet our needs, perhaps we just want to reduce the number of function executions within the specified time, so the above function to do the following improvements:

functionSCROLLFN () {Console.log (1)}functionThrottle (method,delay,duration) {varTimer=NULL; varbegin=NewDate (); return function(){                        varcontext= This, args=arguments; varCurrent=NewDate ();        Cleartimeout (timer); if(current-begin>=duration)            {method.apply (Context,args); Begin=Current ; }Else{Timer=settimeout (function() {method.apply (Context,args);        },delay); }}}window.onscroll=throttle (scrollfn,100,500)

We define a begin start time at the beginning, and when the time interval exceeds duration, the function is executed once, so that we do not repeat the call, and we can guarantee 500 seconds to execute.

Reference: http://www.cnblogs.com/dolphinX/p/3403821.html

JS function throttling