js image stabilization, throttle

Whim, at the time of the triggering event, a number of events will frequently trigger will not cause waste of resources caused or lots of pages Caton, such as onresize, onscroll, onmousemove other events.

Then it leads to a new knowledge point: anti-shake, choke .

Image Stabilization: refers to the trigger event after the end of the delay period of time to go through the code, if the event is triggered again during the delay, the delay time is recalculated.

Example: When the browser onresize trigger event, it is necessary to recalculate the page layout, without image stabilization, stop dragging the browser window size changes, the browser will not stop to calculate, resulting in wasting a lot of resources , coupled with the anti-shake, time delay 600 ms after the trigger event was determined that the event is over, if within 600 milliseconds once again triggered the event, the recalculated 600 milliseconds, until it is determined after the end of the event will trigger;

code show as below:

// The first parameter is a method to be performed after the trigger event, the second parameter is a time delay 
function Debounce (Method, Delay) { 
    the let Timer = null ;
     return  function () { 
        the let context = the this , args = arguments;
         IF (Timer) { 
            the clearTimeout (Timer); 
            Timer = null ; 
        } 
        Timer = the setTimeout ( function () { 
            method.apply (context, args); 
        }, Delay); 
    } 
} 
the let Fun = Debounce (() => { 
        Console .log ('123');
}, 600);
window.addEventListener('resize', fun);        

Throttling: refers only to trigger an event within the specified time, reduce the frequency of execution of the event;

Example: Real input box to determine the legality of the contents, under normal circumstances, we bind a keyboard to input event bounce, bounce is the time to do judgment, if the user enters too fast, it will do many times judge. Throttling one second, then refers to the user input within one second regardless of how many times, after all to judge once, will not affect the user experience, we have achieved the purpose of throttling

code show as below:

Throttle function (FUNC, the wait) { 
    the let lastTime = null 
    the let timeout 
    return function () { 
        the let the this = context; 
        the let now = new new a Date (); 
        the let arguments The Arg =; 
        // If the last execution time and the trigger time is greater than one execution cycle, the execution 
        IF (now - lastTime - the wait> 0) { 
            // If we have the task before the timing clears 
            IF (timeout) { 
                the clearTimeout (timeout) 
                timeout = null 
            } 
            func.apply (context, Arg) 
            = now lastTime 
        } the else IF (! timeout) { 
            timeout = the setTimeout (() => {  
                // change the execution context
                func.apply (context, Arg)
            }, The wait) 
        } 
    } 
} 
the let Quest Throttle = (() => {the console.log ( "Data judged complete")}, 1000) 
the let BTN = document.getElementsByTagName ( 'Button') [0]; 
btn.addEventListener ( 'click', quest)

　Using the same method and image stabilization

Summary: Under normal circumstances onresize, onkeyup event uses image stabilization; onscroll, onmousemove events such as use of a throttle.

 

Completed, the storm report.