Anti-shake and throttling

  • In “high frequency” triggered scenarios, anti-shake and throttling are required

    • Click a button

    • Page scrolling

    • Input fuzzy matching

  • We set ourselves how long it takes to trigger twice or more times as high frequency: this frequency needs to be specified when encapsulating methods (you can set the default value).

    • “Anti-shake” in a high-frequency trigger, we only identify one (can control the start of the trigger, or the last trigger); Details: Suppose we stipulate that triggering multiple times in 500MS is considered as high frequency. As long as the high frequency is triggered when we detect it, it will only trigger once in this frequent operation (even if you operate for 10min)…

    • “Throttling” in a certain high-frequency trigger, we do not only identify once, according to the interval we set (their own frequency), every time to reach this frequency will trigger once; Detail: Suppose we specify a frequency of 500MS, we operate for 10min, the number of triggers = (10601000) / 500

1. If you

/* * func: own service logic * wait: control frequency * immediate: First or last execution */
function debounce(func, wait, immediate) {
    // Multiple arguments and default values for passing and not passing
    if(typeoffunc ! = ='function') throw new TypeError('func must be an function! ')
    if(typeof wait === 'undefined') wait = 500
    if(typeof wait === 'boolean') {
        immediate = wait
        wait = 500
    }
    if(typeofimmediate ! = ='boolean') immediate = false
    
    // Set the timer return value
    let timer = null
    return function proxy(. params) {
        const self = this
        constnow = immediate && ! timerclearTimeout(timer)
        timer = setTimeout(function() {
            timer = null! immediate ? func(self, ... params) :null
        }, wait)
        
        // Execute immediately on the first triggernow ? func.call(self, ... params) :null}}function handle(ev) {
   console.log('ok')
}

submit.onclick = debounce(handle, true)
Copy the code

2. The throttle

/* * func: wait: control frequency */
function throttle(func, wait) {
    if(typeoffunc ! = ='function') throw new TypeError('func must be an function')
    if(typeof wait === 'undefined') wait = 500
    
    let timer = null
    let previous = 0 // Record the last operation time
    return function proxy(. params) {
        let self = this
        let now = new Date(a)// The current trigger operation time
        let remaining = wait - (now - previous)
        if(remaining <= 0) {// If the interval is longer than wait, execute it directly
            clearTimeout(timer)
            timer = nullprevious = now func.call(self, ... params) }else if(! timer) {// If the interval between two triggers does not exceed wait, the timer is set to wait for remaining
            timer = setTimeout(function() {
                clearTimeout(timer)
                timer = null
                previous = new Date() func.call(self, ... params) }, remaining) } } }function handle(ev) {
   console.log('ok')
}

submit.onclick = debounce(handle, 1000)
Copy the code