Throttling and anti-shaking, as well as their own experience

The throttle

There are a lot of high frequency events in the front page, such as: browser rolling events, input box real-time verification, etc. If no processing is done, the performance will be affected to some extent.

Throttling: no longer firing for a specified period of time after a function is executed. The realization idea is as follows:

Records the last time the function completed execution, initialized to 0
Record the time before the function is executed
If the time is longer than the specified time, the execution will not be carried out otherwise

functionThrottle (fn, delay) {var lasttime = 0 var now = date.now () var now = date.now ();if(now - lasttime > delay) {
        fn()
        lasttime = Date.now()
    }
 }
 
 document.body.onscroll = function() {
    throttle(function(){console.log('scroll'}}, 300)Copy the code

There’s a problem with writing it down as an appeal

Lasttime is initialized with each scroll. (So we need to save the lastTime variable)

functionThrottle (fn, delay) {var lasttime = 0return functionVar now = date.now () {var now = date.now ();if(now-lastTime > delay) {fn() // reset time lasttime = date.now ()}}} document.body.onScroll = throttle()function() {
    console.log('scroll-->', Date.now())
 }, 300)
Copy the code

Use closures to save the last execution completion time
Running results show that the time index difference between two adjacent outputs is greater than 300

Image stabilization

Buffering: a function that needs to be triggered at high and high frequencies, and only allows the last time to work within a specified period of time

This feature is often used to prevent users from slamming the form submit button.

After knowing the definition, the general implementation idea is as follows:

Use timer
Saves the last timer object
Continuously clear the last timer object, only retain the last timer object

function debounce(fn, delay){
    var timer = null
    return function() {
        // 不停的清除定时器 保留最后一次的定时器 
        //  清楚上一次的timer
        clearTimeout(timer)
        timer = setTimeout(function() {
            fn()
        }, delay)
    }
  }

  document.getElementById('btn').addEventListener('click', debounce(function(){
    console.log('click')}, 300))Copy the code

Closures were also used to save the last timer object.

Be careful with delay Settings. If the difference between the last button click and the current button click is less than delay, the last timer is cleared and the timer is restarted. Execute the function after delay of delay. So if the value of delay is too long, the delay is longer.

The difference between throttling and anti-shaking

Suppose we use throttling and anti – shake to do real-time check of the input box.

For throttling:

The input box is checked the first time it’s entered.
And then don’t trigger it again for a certain amount of time.
If the interval between the last time and the penultimate time is less than delay, the last time is not equal to check.
As you can see from the above, using throttles as input box checks has some risks

For anti-shake:

It doesn’t check immediately when you start typing
Always check back after the last input
There is always a delay of delay.

To sum up, the two mentioned above have benefits and risks at the same time, so make a reasonable choice in specific scenarios.

Throttling and anti-shaking, as well as their own experience