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

为什么需要防抖节流:
开发中经常容易遇到一些持续发生的事件,比如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()
    }
  }
}
上一篇:[题解] [CERC2017]Intrinsic Interval


下一篇:(HDU - 4553)约会安排(线段树+区间合并)