What are anti-shake and throttling, and their application scenarios?

Debounce

Anti-shake, as the name implies, prevents shaking, so as not to mistake an event for multiple times. Knocking on the keyboard is an anti-shake operation that is encountered every day.

To understand a concept, you must first understand the scenarios in which the concept is applied. In   the world of js , what are the anti-shake scenarios?

1. Buttons such as login and text messages are prevented from being clicked too fast by the user, so that multiple requests are sent, and anti-shake is required
2. When adjusting the size of the browser window, the number of resizes is too frequent, resulting in too many calculations. At this time, it needs to be in place once, and anti-shake is used
3. The text editor saves in real time, when there is no change operation, it will be saved after one second

The code is as follows, it can be seen that the anti-shake focus is on clearing clearTimeout(timer)

function debounce (f, wait) {
  let timer
  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      f(...args)
    }, wait)
  }
}

 

Throttle

Throttling, as the name implies, controls the flow of water. Control the frequency of occurrence of events, such as control to occur once in 1s, or even once in 1 minute. Similar to rate limit controlled by server and gateway.

1. Scroll event, calculate position information every second, etc.
2. Browser playback events, progress information is calculated every one second, etc.
3. The input box searches in real time and sends a request to display the drop-down list, and sends a request every second (also can do anti-shake)

The code is as follows, it can be seen that throttling focuses on the switch lock timer=null

function throttle (f, wait) {
  let timer
  return (...args) => {
    if (timer) { return }
    timer = setTimeout(() => {
      f(...args)
      timer = null
    }, wait)
  }
}

Anti-shake in Vue

Application scenario: Click the submit button multiple times to submit for execution for the first time. Repeated submissions will wait for a certain period of time to submit for execution.

export function clickOnce (fn) {
  let flag = false
  return function () {
    if (flag) return
    flag = true
    fn()
    setTimeout(function () {
      flag = false
    }, 2000)
  }
}

//util.js
export const debounce = (fn, wait) => {
    let delay = wait|| 500
    let timerout;
    return function () {
        let args = arguments;
        if (timerout) {
            clearTimeout(timer)
        }
        let callNow = !timerout;
        timerout = setTimeout(() => {
            timerout = null
        }, delay)
        if (callNow) fn.apply(this, args)
    }
}

//引用
import {  debounce  } from '@/env/util'

methods:{
	refresh:debounce(function(){
	//执行函数
		this.refreshTypes2('G');
	},3000)
}

 

to sum up

The first time you click the submit button, the debounce method will be executed immediately, and the execution will continue without triggering the event in the next 3s. This is great for preventing duplicate submissions of the form!

Summary (brief answer)

       Anti-shake is to let the function be executed at the last time.
       Throttling is to be executed at a fixed frequency every certain period of time.

• Anti-shake: To prevent jitter, the event trigger will be reset within a unit time to prevent the event from being accidentally triggered multiple times. Code implementation focuses on clearing clearTimeout
• Throttling: Control the flow. The event can only be triggered once per unit time. If the server-side current limit is the Rate Limit. Code implementation focuses on unlocking and closing the lock timer=timeout; timer=null