This is the 23rd day of my participation in the August More Text Challenge.More challenges in August

Underscore (initially, learn debounce from underscore), this article begins with the discussion of throttling

Throttling application scenario: When calling a function repeatedly, call the function at least once every wait milliseconds. Useful for controlling events that trigger more frequently.

Common application scenarios of throttling are as follows:

  • Dom element drag and drop
  • Calculate the distance the mouse moves
  • Listen for scroll

A bit of background for this example: I have a div, and moving the trigger callback function on div, listenMoveOn, uses a simpler version of the throttling, as shown in the code below

Trigger at the first time, not at the end

Throttling with timestamps will trigger event-listening callbacks as soon as you throttle it. Because old is 0, now-0 must be greater than wait, so this will trigger for the first time

<style>
    div {
        background-color: # 666;
        height: 300px;
    }
</style>
​
<div></div>
​
<script>
    let dom = document.getElementsByTagName("div") [0];
    dom.onmousemove = throttle(listenMoveOn, 200);
    
    function listenMoveOn() {
        // Listen to the callback to do something
    }
    / * * * *@param {function} fn- Callback function *@param {number} wait- Trigger interval */
    function throttle(fn, wait) {
        let timer, old, now, context, args;
        old = 0
​
        return function() {
            now = +new Date()
            context = this
            args = arguments
            if (now - old > wait) { // Because now-0 must be greater than wait, this implementation must fire for the first time
                fn.apply(context, args)
                old = now
            }
        }
    }
</script>
Copy the code

If the first time is not triggered immediately, the last time is triggered

When using setTimeout to implement throttling, it will not be triggered until the time reaches the standard, so it will not be triggered for the first time, and it will be supplemented once after the later exit due to the existence of setTimeout.

<script>
    / * * * *@param {function} fn- Callback function *@param {number} wait- Trigger interval */
    function throttle(fn, wait) {
        let timer, context, args;
​
        return function() {
            context = this
            args = arguments
            if(! timer) { timer =setTimeout(() = > {
                    timer = null    // Make sure you can reset the timer the next time you come in
                    fn.apply(context, args)
                }, wait)
            }
        }
    }
</script>
Copy the code

summary

In this article, we briefly introduce two methods for throttling, each of which has its own characteristics and application scenarios. In the next section, we will refer to the throttle in underscore to resolve the throttling of the high-spec version and combine the advantages of the two methods to control whether the first and last throttling is triggered.