Function tremble and function throttling

The first time I heard of this was when I went to the headline interview after graduation, and the interview said, “Tell me what is WDT?” Can only silently answer: sorry, this is not very familiar! Embarrassed ing…

After work has been in the business team, the real use of this thing is not many times, but we have to understand! All business development should be aligned with the mian, otherwise there is no meaning

What the hell is that?

Both anti-shake and throttling prevent multiple calls to the function and control the number of times the function is executed on the timeline.

Function debounce

The callback is executed n seconds after the event is triggered. If it is triggered again within n seconds, the timer is reset and the time is calculated before the callback is executed.

Example in life: someone enters the elevator, the elevator will automatically close after 10 seconds, if someone enters the elevator again within 10 seconds, the elevator will re-time and automatically close.

function debounce(fn, delayTime) {
    let timer = null
    return function (args) {
        if (timer) {
            timer = null
            clearTimeout(timer)
        }
        let _this = this
        let _args = args
        timer = setTimeout(function () {
            fn.call(_this, _args)
        }, delayTime)
    }
}

let inputDom = document.getElementById('input2')

inputDom.addEventListener('keyup', debounce((e) => {console.log(e.target.value)}, 1000))
Copy the code

Principle of image stabilization

In order to reduce resource requests for frequent events, anti-shaking is performed by performing a callback if the user does not perform an operation during the wait time, and continuing to wait for the corresponding interval if there is an operation. Therefore, in the closure function, initialize a time parameter timer. If timer is empty, it means that the callback event is not executed or has been completed, indicating that the user has no operation during the waiting time. On the contrary, if timer is not null, the timer is cleared and the timer is reset.

What if we want to execute the callback function first and then time it, instead of executing it when the time is up? It is also possible to implement an immediate execution version:

function debounce(fn, delayTime, immediate) { let timer = null return function () { if (timer) { timer = null clearTimeout(timer) } let _this = this let _args = arguments if (immediate) { timer = setTimeout(() => { timer = null }, delayTime) if (! timer) { fn.call(_this, _args) } } else { timer = setTimeout(function () { fn.call(_this, _args) }, delayTime) } } }Copy the code

Function throttle

The callback function is executed only once in n seconds, executed first and then evaluated.

Example in life: when playing plane wars, click the screen to fire bullets repeatedly, even if the frequency of clicking the screen is fast, the bullets are fired at an average interval.

SetTimeout implements function throttling

function throttle(fn, wait) {
    var timer = null
    if (timer) return 
    return function() {
        let _this = this 
        let args = arguments
        timer = setTimeout(function() {
            fn.apply(_this, args) timer = null
        },
        wait)
    }
}
Copy the code

Time difference implements function throttling

function throttle(fn, wait) {
    var lastTime = 0
    return function() {
        let _this = this 
        let args = arguments 
        let nowTime = new Date() 
        if (nowTime - lastTime > wait) {
            fn.apply(_this, args) lastTime = nowTime
        }
    }
}
Copy the code

Throttling principle

The purpose of function throttling is to make the function guilty of executing at a certain time, which is also the original design of setTimeout, so you can use setTimeout directly, of course, after executing the callback must be empty timer. Another way to think about it is to calculate the difference between the trigger time and the execution time, greater than the callback time.

Usage scenarios

To summarize: function tremble is triggered within a certain period of time, reset the timer. Function throttling is a callback that triggers an action only once at a given time.

So the function is applicable to the scene: monitor window scrolling, zooming. High-frequency events;

Function throttling applies to the following scenarios: The interface does not return a value due to network reasons or other reasons.

VUE uses function stabilization

In business requirements, one function is to click the button and execute the SDK method to suspend the photo function of the system. There will be a time difference during the suspension. In order to prevent users from clicking frequently, the function of anti-shake should be added.

</div> </template> methods: {uploadPic: VueDebounce ('wakeUpPhotos', 2000, true), wakeUpPhotos () { VueDebounce (fnName, time, Immediate) {let timer = null return function () {let args = arguments if (timer) {clearTimeout(timer)  if (immediate) { timer = setTimeout(() => { timer = null }, time) if (! timer) { this[fnName](... args) } } else { timer = setTimeout(() => { this[fnName](... args) }, time) } } }Copy the code