Why use anti shake and throttling?

• Take a chestnut eight:

html:
No throttling and anti chattering <input type="text" name="" id="normal">

js:
   window.onload=function(){
           // Impersonate ajax requests
     function ajax(content){
       console.log('ajax request'+content);
     }
     let iptnormal=document.getElementById('normal');
     iptnormal.addEventListener('keyup',e=>{
       ajax(e.target.value)
     })
   }

• result

As you can see from the screenshot, each time you enter a number, an ajax request is sent.

In practical application, the processing function is frequently called in a short time. If the processing function needs to call the background interface, it may not respond last time and the next request will come again. This inadvertently increases the pressure on the server, and will also cause jam for users.

Anti shake

What is anti shake?

Execute the callback function n seconds after the event is triggered. If the event is triggered again within n seconds, recalculate the time.

• Take a chestnut eight:

html:
Input after anti shake:
        <input type="text" name="debounce" id="debounce">
    
js:
   window.onload = function () {
            //Impersonate ajax requests
            function ajax(content) {
                console.log('ajax request ' + content)
            }
            // Anti shake
            function debounce(fun, delay) {
                return function (args) {
                    // Save the passed in parameter (e.tracer. Value)
                    let _args = args
                    //Each time an event is triggered, the current timer is cleared, and then the timeout call is overridden
                    clearTimeout(fun.id)
                    fun.id = setTimeout(()=> {
                        fun.call(this, _args) // Calling ajax functions
                    }, delay)
                }
            }
            let inputDebounce = document.getElementById('debounce')
            let debounceAjax = debounce(ajax, 500)
            inputDebounce.addEventListener('keyup', function (e) {
                debounceAjax(e.target.value)
            })
        }

• result:

• explain:
  1. Every time an event is triggered, the current timer will be cleared, and then the timeout call will be reset, that is, re timing. This will cause each high-frequency event to cancel the previous timeout call, so that the event handler cannot be triggered;

2. Only when the high-frequency event stops, the timeout call triggered by the last event can be executed after the delay time;

Application scenario

• SMS verification code
• Submit Form
• resize event
• input event (of course, throttling can also be used to realize real-time keyword search)

throttle

What is throttling?

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

• Give me a chestnut eight

html:
  3.Input after throttling:
        <input type="text" name="throttle" id="throttle">
js:
   window.onload = function () {
            //Impersonate ajax requests
            function ajax(content) {
                console.log('ajax request ' + content)
            }
            ​// throttle
            function throttle(fun, delay) {
                let last, deferTimer
                return function (args) {
                    // Save arguments
                    let _args = arguments;
​
                    let now = +new Date();
                    if (last && now < last + delay) {
                        clearTimeout(deferTimer);
                        deferTimer = setTimeout(()=> {
                            last = now;
                            fun.apply(this, _args);
                        }, delay)
                    } else {
                        last = now;
                        fun.apply(this, _args);
                    }
                }
            }
            let throttleAjax = throttle(ajax, 1000)
            let inputThrottle = document.getElementById('throttle')
            inputThrottle.addEventListener('keyup', function (e) {
                throttleAjax(e.target.value)
            })
        }

• result

• explain
  As can be seen from the results, ajax requests are executed every 1 second

Application scenario

• Scroll event: the scroll position is calculated once per unit time
• input event (mentioned above)
• Play events, calculate progress bar
  Finally: This article is only my study notes and references in the article. If the original blogger mind, please contact me and delete it immediately
  reference: https://juejin.cn/post/6844903669389885453