Anti shake and throttling of JS

Anti shake and throttling concept

Anti shake and throttling are both ways to optimize performance : It is aimed at high-frequency triggered events ： such as Scroll Events scroll, User input events input

Function anti shake
debounce： The user keeps triggering events , Event handlers are not executed , Until the user does not trigger this event within the specified time , Then execute the event handler once （ Anti shake means that the event handler will only execute once ）

Function throttling throttle： The user keeps triggering events , The event handler function will execute once after the specified time interval , It will not be executed repeatedly within the specified time ;（ Throttling means that the event handler executes once every specified interval ）

The difference between anti shake and throttling ： Anti shake is to change multiple execution to last execution , Throttling is to change from multiple execution to execution every other time

Implementation of anti shake and throttling ： Timers and timestamps （ To prevent variable contamination , Realize functions in the form of closures ）

Refer to the website ： https://www.cnblogs.com/youma/p/10559331.html

Anti shake implementation ( Timer implementation )

    function debounce(fn, delay) {
     //fn Is the function of real event processing /delay Is time 
        //  Declare a timer in advance ,  The assignment is null
        let timer = null;
        return function() {
    
        // The first thought 
            // if (!timer) {
    
            // timer = setTimeout(fn, delay)
            // } else {
    
            // clearTimeout(timer);
            // timer = setTimeout(fn, delay)
            // }
            // Lite version   Shake proof ：  The key point is to clear the node of the timer 
            // if (timer) {
    
            // clearTimeout(timer);
            // }
            // timer = setTimeout(fn, delay)

            //  in consideration of this Point to and pass parameters 
            let that = this;
            let args = arguments;
            if (timer) {
    
                clearTimeout(timer);
            }
            timer = setTimeout(function() {
    
                fn.apply(that, args)
            }, delay)
        }
    }
    //  Real time handlers 
    function print() {
    
        console.log('hello world');
    }
    window.onscroll = debounce(print, 2000);
    // When rolling , Call a function 
</script>

Throttling is achieved ( Timestamp implementation )

 <script>
    // This throttling function uses timestamps to make the first scrolling event execute a callback function , After that, every 1000ms Do it once ,
    // In less than 1000ms Scrolling during this time period is not performed 
    //  Throttling function   Time stamp 
    function throttle(fn, delay) {
    
        //  Time of starting point 
        let start = Date.now();
        return function() {
    
            //  Get the current time , adopt   current time  -  Starting time  =  Time difference ,
            //  Judge   Sum of time difference  delay The pass of 
            var now = Date.now();
            if (now - start >= delay) {
    
                print()
            //  After the event handler executes once , It needs to be timed again 
                start = Date.now();
            }
        }
    }
    //  Real event handlers 
    function print() {
    
        console.log(' throttle ');
    }
    window.onscroll = throttle(print, 1000);
</script>

If you want to pass on the parameters , change this The direction of

<script>
        //  Throttling function   Time stamp 
        function throttle(fn, delay) {
    
            //  Time of starting point 
            let start = Date.now();
            return function() {
    
                let that = this; //this Point to window
                let args = arguments;
                //  Get the current time , adopt   current time  -  Starting time  =  Time difference ,
                //  Judge   Sum of time difference  delay The relationship between 
                let diff = Date.now() - start
                if (diff > delay) {
    
                    fn.apply(this, arguments)
                //  After the event handler executes once , It needs to be timed again , So get the present time 
                    start = Date.now();
                }
            }
        }
        //  Real event handlers 
        function print() {
    
            console.log(' throttle ');
        }
        window.onscroll = throttle(print, 1000);
    </script>