Introduction to the

To throttle down, the dictionary says:

To throttle an inflow or outflow, especially by means of a throttle valve.

You’re throttle, which is a function that controls the flow in or out. Just began to contact this kind of noun, anyway I was a little confused, slightly abstract, not good to understand.

Well, forget the term and look at why you use it.

scenario

Scroll, resize and mousemove events all have one thing in common: they are triggered frequently. For example, scroll down.

Start with some code:

let num = 1
window.onscroll = (a)= > {
  console.log(num++)
}
Copy the code

This listens for the scroll event on the page, which prints out incrementing numbers as the page scrolls.

The following is the result of the run, as you can see from the console:

Think back to the most commonly used click events. But scroll, scroll a little bit, several times to go. If you process DOM elements in scroll events, the performance of the page will definitely suffer, and the laptop fan may sound as the page scrolls, or the page may have a heart attack after a card.

The way to make it quiet is to have fewer callbacks. When it comes to limiting the behavior of a wildly executing function by executing it fewer times, does the concept of “throttling” loom large and become less abstract? It’s like turning down the faucet and letting the water run.

methods

How do I make this function flow slowly?

Imagine a page that keeps scrolling and can’t stop. At this time, the callback has been triggering, crackling.

Talk to it: “Can you do this every few seconds?”

“How many seconds?”

“Two hundred milliseconds.”

The throttling function is a function that sets a time interval between one execution and the next.

It is a bit like the cooldown time of skill in the game. When skill is put, it enters the cooldown time. During this period, even if skill is constantly placed, it cannot be put.

A thousand words will not equal the above code:

const throttle = (func, ms = 200) = > {
  let prev = new Date().getTime()
  return function(. args) {
    let now = new Date().getTime()
    if (now - prev >= ms) {
      func()
      prev = now
    }
  }
}

Copy the code

The throttle function here takes a function func and a number of milliseconds ms as arguments and returns a function. When the returned function is fired repeatedly, the incoming func is executed only if the interval between the two fires is greater than or equal to the specified number of milliseconds.

The interval is determined by a timestamp. We first define the variable prev to record a time. In the returned function, we get the timestamp of its execution now, compare the two timestamps, and execute the passed func function if the interval is greater than the specified number of milliseconds ms.

Take the above example for another example:

let num = 1
window.onscroll = throttle((a)= > {console.log(num++)}, 2000)
Copy the code

This listens for a page scroll event and triggers a callback every two seconds. As shown below (no slow down) :

Of course, in real development, you don’t do that every two seconds. This is just to make it more obvious what the throttling function does.

conclusion

The throttling function sets an execution cycle for frequently triggered callbacks, reducing the drain on page performance.

Callbacks for resize, Scroll, mousemove, etc.