干货--项目中封装好的防抖节流方法

为什么需要防抖节流：
开发中经常容易遇到一些持续发生的事件，比如scroll, resize, input, mousemove等，频繁的执行回调，造成页面性能的损耗，页面容易卡死，这时候就有两种解决方法，防抖和回流

防抖：
事件触发后的time时间内只执行一次。原理是维护一个延时器，规定在time时间后执行函数，如果在time时间内再次触发，则取消之前的延时器重新设置。所以回调只在最后执行一次。

clearTimeout() 方法
可取消由 setTimeout() 方法设置的 timeout
语法：clearTimeout(id_of_settimeout)
id_of_settimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

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)
  }
}

页面调用：

**引用：**
  mounted() {
    this.debounceHandler = debounce(400, false)
  },
**项目中具体使用：**
   this.debounceHandler(() => {
	...
   })
   // 此效果是事件触发的400ms后函数只执行一次

节流：
在事件触发过程中，每隔time执行一次回调

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

标签：function,防抖,节流,--,interval,clearTimeout,timer,fn
来源： https://blog.csdn.net/m0_52009348/article/details/120457626