Where the problem occurs:

When we perform window size scaling, resize, scroll, input box content verification and other operations, if the frequency of event processing function calls is unlimited, it will increase the burden of the browser and lead to poor user experience.

At this point, debounce and throttle can be used to reduce the frequency of calls without compromising the actual performance.

Function image stabilization

Function stabilization: When an event is continuously triggered and no event is triggered again within a certain period of time, the event handler will execute once. If the event is triggered again before the set time, the delay will start again.

// Handle is not invoked when the scroll continues. If there is no scroll within 1000ms (the preset time), Handel is invoked to print '1'.
function debounce(fun,wait){ 
            var timer = null;  
            return function(){
                if(timer ! = =null)clearTimeout(timer) 
                timer = setTimeout(fun,wait)

            }
        }
        // Event handlers
        function handle(){  
            console.log('1')}window.addEventListener('scroll',debounce(handle,1000))
Copy the code

Function of the throttle

Specify a unit of time. Within this unit of time, only one callback function that triggers an event can be executed. If an event is triggered multiple times within the same unit of time, only one callback function can take effect.

Var throttle = function (func, delay) {var timer = null; return function () { var context = this; var args = arguments; if (! timer) { timer = setTimeout(function () { func.apply(context, args); timer = null; }, delay); }} function handle() {console.log(' execute '); } window.addEventListener('scroll', throttle(handle, 1000));Copy the code

Conclusion:

Function stabilization: will operate as a combined operation for several times, the principle is to maintain a timer, rules in operation after the event does not trigger, delay time and then trigger the event handler, but if the operation in the delay time to trigger again, will cancel the timer to reset, as a result, only the last operation can be triggered.

Function throttling: causes functions to fire only once in a given period of time. The principle is to trigger the function by judging whether a certain time has been reached

Similarities:

The purpose is to reduce the frequency of processing function calls without affecting the actual effect, improve user experience, and achieve performance optimization.

Difference:

Function throttling does not matter how often events are fired. It is guaranteed that a real event handler will be executed within a specified period of time, which is suitable for scrolling with Ajax requests for data, repeated mouse click triggers, mousedown(only triggered once per unit of time), etc.

Function anti-shake only triggers a function after the last event, which is suitable for search and search association. When users continuously input values, anti-shake is used to save request resources. Windows triggers resize. Resize the browser window repeatedly to trigger resize. Use stabilization to make it trigger only once.