function throttling of JavaScript

For high-frequency event triggering, in order to optimize page performance, we generally do function throttling. For example: Resize, Keydow, scroll events and so on. User's frequent operation, will cause the event high frequency execution, this will appear the page jitter Ah, frequent adjustment interface ah and so on. In order to optimize, we use function throttling, the principle is to use settimeout control to trigger the frequency of the return.

1. The first option:

 var   timer;  function   Throttle1 (fun,sec) {Cleartim            Eout (timer); Timer  = setTimeout (function   () {Fu            N ();        },SEC); }$ ( function   () {$ (window). Scroll (  function   () {Throttle1 ( 
   
    function  
     () {Console.log ( ' I roll!!!                ' 
   

The first solution is the simplest, the principle of a look at, with the purpose of the settimeout is that after the user triggers to 500 milliseconds will not execute the callback, 500 milliseconds to execute the callback once, for the previous event firing is not the execution callback. However, the flaw is that you cannot get the incoming parameters of the callback, even if it is available, and does not guarantee that the execution context this is pointed.

2. The second option:

functionThrottle2 (fun,sec) {varTimer =NULL; return function() {cleartimeout (timer); varContext = This, arg =arguments; Timer= SetTimeout (function() {fun.apply (CONTEXT,ARG);                },SEC); Timeer=NULL; }                }$(function() {$ (window). Scroll (Throttle2 (function() {Console.log (' I roll!!! ‘); },500)            ); });

The second scheme guarantees the execution context of the callback function, and supports the multi-parameter incoming callback.

But everyone knows that settimeout is an asynchronous function that is suspended and placed at the end of the asynchronous queue. Callbacks in the asynchronous queue are performed only after the main thread has finished executing. In the user's non-stop operation: such as scrolling scroll bar, change the window size, settimeout will be suspended, only after the user operation, will be executed settimeout callback. Then the problem comes, the user has been operating will affect the normal function use Ah! The third solution is to solve the problem that the callback function does not execute after SetTimeout is suspended.

3. The third option:

functionThrottle3 (fun,sec,mustrundelay) {varTimer =NULL; varT_start; return function(){                varContext = This, args = arguments, T_curr = +NewDate ();                Cleartimeout (timer); if(!T_start) {T_start=T_curr; }                if(T_curr-t_start >=Mustrundelay)                    {fun.apply (context, args); T_start=T_curr; }Else{Timer= SetTimeout (function() {fun.apply (context, args);                }, SEC); }                            }                    }$(function() {$ (window). Scroll (Throttle3 (function() {Console.log (' I roll!!! ‘); },500,1000)            );})

Using the third scheme, it solves the situation of settimeout being suspended, and ensures the user's normal operation effect.

function throttling of JavaScript