This is the 26th day of my participation in the August Text Challenge.More challenges in August

What is?

The principle of throttling is that we are given a time (n), within this time (n), no matter how we trigger, it will only execute once, and when this time passes, we will execute a second time, and then wait n seconds, and then execute a third time… And so on

Why is that?

In everyday business development, there are many events that are frequently triggered, and if we don’t do something about them, it can be a big performance problem. Handled improperly or left unchecked, the browser can easily freeze. We should have done such a demand, monitored the page scroll event, scroll to a certain place, at the top of the TAB bar highlighted will follow positioning change, if you use the image stabilization to handle frequent triggering event, if the user has been rolling, and then highlight never react with the TAB bar, this time we can use the throttle to deal with, Even if the user keeps firing events for a certain amount of time, we’ll respond to them by highlighting the corresponding TAB

How to use

Simple implementation I create a box and then apply a mousemove event to the box, incrementing the value each time the event is triggered

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta Word-wrap: break-word! Important; "> <title>Document</title> <style> body {margin-top: 16px; 100px; display: flex; justify-content: center; background: #BFA2DB; } #div1 { display: flex; justify-content: center; align-items: center; width: 200px; height: 200px; color: #7F7C82; background-color: #F3F1F5; } </style> </head> <body> <div id="div1"></div> <script> var value = 1; var div1 = document.getElementById('div1'); function count() { div1.innerHTML = value++; }; div1.onmousemove = count; </script> </body> </html>Copy the code

You can see it’s moving all the time. According to what is described above, we can implement the simple function of the throttling according to the timestamp

div1.onmousemove = throttle(count,3000);
function throttle(fn, wait) {
    let prev = 0
    return (. args) = > {
        let now = +new Date(a)if (now - prev > wait) {
            fn.apply(this, args)
            prev = now
        }
    }
}
Copy the code

Now, I’ve set him to only execute once in 3s, and as you can see, I’ve been triggering events up here, but he’s only going to execute once every three seconds.

We can also use timers to do this

div1.onmousemove = throttle(count, 2000);
function throttle(fn, wait) {
    let timer = 0
    return (. args) = > {
        if(! timer) { timer =setTimeout(function () {
                timer = null;
                fn.apply(this, args)
            }, wait)
        }
    }
}
Copy the code

When the mouse cursor moves in, the event will not be executed immediately. The event will be executed once 2 seconds later, and will stop firing at 6.2 seconds. However, the event will still be executed at 8s.

After that, the function can be optimized to execute on entry and not execute after the event is removed.