This is the fourth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

As the basis of JS, the anti – shake throttling should be classic and could not be more classic

First, anti – shake function

1, define,

In fact, why called anti – shake function, speaking is to prevent jitter. That is, when events are constantly fired frequently, performance is affected. In order to optimize this case of frequent triggering events, there are anti-shake functions.

2. Application scenarios

For example: Window resize, scroll, mousedown, Mousemove, keyUp, keyDown…

3. Concrete implementation

First of all, we need to know how to implement the principle of anti-shake: no matter how the event is triggered, the thing to be executed must be executed n seconds after the event is triggered.

That is: if the event is triggered within n seconds, the new time shall prevail, n seconds after the execution.

    function debounce(fn, delay) {
        let timer;
        return function() {
            var context = this; / / this point
            var args = arguments; / / the event object
            clearTimeout(timer)
            timer = setTimeout(() = >{ fn.apply(context, args) }, delay); }}Copy the code

At this point, we have implemented a simple anti-shake function.

4, test,

Then let’s test the anti-shake function we just wrote:

    <input type="text" id="input">
Copy the code
    function inputFun(value) {
        console.log('What you output is' + value)
    }
    const input = document.getElementById("input")
    const debounceInput = debounce(inputFun, 500)
        // Listen for Input to the Input box
    input.addEventListener('keyup'.function(e) {
        debounceInput(e.target.value)
    })
Copy the code

Second, throttling function

1, define,

A throttling function is one that does only one thing at a time, allowing lazy loading with good performance.

2. Application scenarios

For example, listen for the distance between the scroll bar and the top.

3. Concrete implementation

As mentioned earlier, throttling means only doing one thing at a time, so you only need to give a variable to judge whether the thing is completed.

    function throttle(func, wait) {
        let timerOut;
        return function() {
            let context = this;
            let args = arguments;
            if(! timerOut) { timerOut =setTimeout(function() {
                    timerOut = null
                    func.apply(context, args)
                }, wait)
            }
        }
    }
Copy the code

4, test,

Similarly, let’s test, for example, we need to listen to the browser scroll event, return the current scroll bar from the top of the distance.

Then we can use the throttle function:

    function showTop() {
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        console.log('Scrollbar position' + scrollTop)
    }
    window.onscroll = throttle(showTop, 1000)
Copy the code