How to gracefully use anti-vibration flow in Vue

1. What is anti-vibration flow

Stabilizing: Prevents repeated click triggering events

First of all, what is shaking? Shaking is a shiver! Originally, now three! I don't know if the old iron mind is very picturesque! Ha ha ha ha ha ha ha ha ha

A typical application is to prevent users from repeatedly requesting data.

Code implementation points: set a timer, go through closures, grab timer variables, control timer additions and clears


Directly on the code

  function debounce(fn, time) {
      let _arguments = arguments
      let timeout = null
      return function () {
          if (timeout) {
              clearTimeout(timeout)
          }
          timeout = setTimeout(() => {
              fn.call(this, _arguments)
          }, time);
      }
  }

Throw: The task will only be executed once during a given interval

Everyone has played FPS games (haven't played???? (Shoot knows it!) The speed of the item is certain, will not increase because you click the mouse faster.

Key to Code Implementation: Determine whether code needs to be executed by a boolean variable as a state

Directly on the code

  function throttle(fn, time) {
      let _arguments = arguments
      let canRun = true 
      return function () {
          if (!canRun) return
          canRun = false
          setTimeout(() => {
              fn.call(this, _arguments)
              canRun = true
          }, time);
      }
  }

2. Elegant use in Vue 

 My Application Scene: Avatar Cropping Component, image image stabilization after scrolling wheel zoom