In our last post, we learned the concept of Debounce with alfy’s help

We’re talking about throttling, and we’re going to discuss throttling in this article

Conceptual understanding

Alfy is still working

Let’s bring back our friend Alfy, who’s still working as a waiter at the restaurant. Although the order process has been handled, but the day and night work still makes him very tired

So he decided to work only five days a week

When the alarm went off on Monday morning, Alfy had to get up and go to the restaurant because he hadn’t worked even one day this week. When the alarm went off on Thursday morning, Alfy still had to leave his warm bed because he had two more days of work to do this week

But when the alarm goes off on Saturday morning, Alfy can turn it off, roll over and continue to dream, because our friend has already worked five days this week and today is his day off

After working five days a week, alfy has two days off, so that he can keep energetic both in work and in life

analogy

In the front-end program design, we can also arrange work like ALFY, and fix the number of times some functions are executed per unit time, so as to reduce the load of related resources and improve the performance

An implementation

Starting directly from the concept of throttling, it is easy to think of a way to introduce a flag to record whether a function has been executed in the current unit of time

If not, the function is executed immediately, and the flag is set to executed, and the flag is not refreshed until the next unit of time to control the number of times the function is executed per unit of time

/** * Sets throttling ** for existing functions@param {Function} Func will set the throttling function *@param {number} Limit Indicates the time *@return {Function} Set the function */ after throttling
const throttle = (func, limit) = > {
    // indicates whether the corresponding function has been executed in a unit of time
    let inThrottle;

    return function(. args) {
        // If the tag shows no execution in the current unit time, execute the corresponding function and set the tag
        if(! inThrottle) {const context = this;

            Reflect.apply(func, context, args);
            inThrottle = true;
            setTimeout(() = > inThrottle = false, limit); }}}Copy the code

test

We can use OnScroll to show you roughly what throttling looks like

  • HTML

    <! DOCTYPE html><html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>throttle</title>
</head>

<body>
    <div id="demo" style="height: 1000px"></div>
    <script src="./throttle.js"></script>
</body>

</html>
Copy the code

  • JavaScript

    /** * Sets throttling ** for existing functions@param {Function} Func will set the throttling function *@param {number} Limit Indicates the time *@return {Function} Set the function */ after throttling
const throttle = (func, limit) = > {
    // indicates whether the corresponding function has been executed in a unit of time
    let inThrottle;

    return function (. args) {
        // If the tag shows no execution in the current unit time, execute the corresponding function and set the tag
        if(! inThrottle) {const context = this;

            Reflect.apply(func, context, args);
            inThrottle = true;
            setTimeout(() = > inThrottle = false, limit); }}}const demo = document.getElementById("demo");
let COUNT = 0;
function count() {
    demo.innerHTML += ('Sliding up and down corresponds to the callback function being executed${++COUNT}Time < br > `);
}

// Before adding throttling
// window.onscroll = count;

// Add throttling
window.onscroll = throttle(count, 3000);
Copy the code

  • Before adding throttle

  • After adding throttling

From the above two giFs, we can see that: before adding throttling, the corresponding onScroll function will be executed several times as the page slides up and down; After throttling is added, the corresponding function is executed only once per unit of time and not again until the next unit of time

conclusion

By throttling, we can actively control the frequency of execution of related functions, thus avoiding a large number of events in a short period of time causing the page to stall

In addition to onScroll mentioned above, throttling is also available for button repetition and TouchMove

The above is my understanding of Throttle. If there are any problems in the article or you have a better understanding, please point out and communicate with me