Dry goods -- encapsulated anti shake and throttling method in the project

Why do I need anti shake throttling ：
It is often easy to encounter some continuous events in development , such as scroll, resize, input, mousemove etc. , Execute callback frequently , Cause loss of page performance , The page is easy to get stuck , At this time, there are two solutions , Anti shake and backflow

Shake proof ：
After the event is triggered time Execute only once in time . The principle is to maintain a time delayer , It is stipulated in time Execute the function after time , If in time Trigger again in time , Then cancel the previous time delayer reset . So the callback is executed only once .

clearTimeout() Method
Cancelable by setTimeout() Method set timeout
grammar ：clearTimeout(id_of_settimeout)
id_of_settimeout： from setTimeout() Back to ID value . This value identifies the block of deferred execution code to cancel .

function debounce(interval = 400, immediate = false) {
    
  let timer
  return function (fn) {
    
    if (immediate) {
    
      immediate = false
      fn && fn()
      return
    }
    window.clearTimeout(timer)
    timer = window.setTimeout(() => {
    
      window.clearTimeout(timer)
      fn && fn()
    }, interval)
  }
}

Page call ：

** quote ：**
  mounted() {
    
    this.debounceHandler = debounce(400, false)
  },
** Specific use in the project ：**
   this.debounceHandler(() => {
    
	...
   })
   //  This effect is triggered by the event 400ms The latter function is executed only once 

throttle ：
During event triggering , every other time Perform a callback

function throttle(interval = 400) {
    
  let lastTime = 0
  return function (fn) {
    
    const currentTime = new Date().getTime()
    if (currentTime - lastTime >= interval) {
    
      lastTime = currentTime
      fn && fn()
    }
  }
}