Github code: github.com/Haixiang612… Preview: yanhaixiang.com/debounce-th…

Debounce and Throttle are popular interview questions. I was asked this question myself when I was looking for my first job. At that time was asked for a long time to say the difference between the two, said that he brought into the pit.

Today, let’s share with you the difference between the two.

What is the debounce

Chinese name: shake. After the operation is started, the operation will be performed only after a delay period when there are no more operations.

const onClick = debounce(fn, 300)

click // fn is not executed
click // fn is not executed
等 200Ms before you click// fn is not executed
等 500Ms before you click/ / execution fn
Copy the code

I’m sure you’ve all seen tuning forks in junior high school physics

When something touches it, it will vibrate all the time. Anti-vibration can be figuratively understood as: do something when the vibration is no longer.

The most common scenario is for a user to repeatedly click on the “submit” button, and debounce generates a function that performs the “submit” operation after the user has stopped clicking for a period of time.

Debounce implementation

The implementation idea is as follows:

  1. SetTimeout Is executed after delay ms
  2. Every time the debmentioning function is called, the timerId will be cleared directly
  3. When a period of time has passed (greater than delay ms), setTimeout automatically executes fn
function debounce(fn, delay) {
  let timerId, context, args

  function debounced() {
    [context, args] = [this.arguments]

    clearTimeout(timerId) // It will be cleared when called again later

    timerId = setTimeout(() = > {
      fn.apply(context, arguments)  // Execute at point
    }, delay)
  }

  return debounced
}
Copy the code

What is the throttle

Chinese name: Throttle. After the operation is started, it is only done once within delay MS.

const onMove = throttle(fn, 300)

move // Execute first time
move // Run fn 300 ms laterAfter the3Ms after the move// Prepare to execute fn on 303 MSAfter the100Ms after the move// Remove the previous timerId and prepare 400 ms to execute fnAfter the301Ms after the move// Execute fn immediately
Copy the code

Throttling, literally, means threshold MS to do one thing over a period of time, similar to a skill CD. Of course, you might not be able to accurately understand that you’re throttle because you’re performing it once at most. For example, if the CD value is cooled, it will be executed in delay MS, although it cannot be executed now.

The skill CD effect will only occur if the move above is executed an infinite number of times.

Throttle implementation

The implementation idea is as follows:

  1. It’s executed the first time it’s called
  2. Called when last time + threshold > current time (CD value cooling), will be executed after thresold ms
  3. The current time is recorded as preivous when fn is executed
function throttle(fn, threshold) {
  let timerId, previous

  function throttled() {
    let [context, args] = [this.arguments]

    const now = Date.now() // Record the current time

    if (previous && now < previous + threshold) {
      clearTimeout(timerId) // Clears the time when called later

      timerId = setTimeout(() = > { // reset the timer
        previous = now // Record the time for future comparisons
        fn.apply(context, args)
      }, threshold)
    } else {
      previous = now // Record time for later comparison, starting a new period
      fn.apply(context, args)
    }
  }

  return throttled
}
Copy the code