节流防抖案例

节流防抖

什么是截流防抖

这一概念最早出现在工业设计中，对电子元器件的控制和对水流等流体的限制，可以起到保护器件，减少损耗的作用

防抖 debounce

字面意思就是防止抖动，比如人们在操作手抖多次误触

主要应用场景

• 输入框中频繁的输入内容，搜索或者提交信息；
• 频繁的点击按钮，触发某个事件；
• 监听浏览器滚动事件，完成某些特定操作；
• 用户缩放浏览器的resize事件；

节流 throttle

限制流量，很直接的理解

主要应用场景

• 监听页面的滚动事件；
• 鼠标移动事件；
• 用户频繁点击按钮操作；
• 游戏中的一些设计；（最小攻击间隔等）

先看基本案例 查看效果点击这里

防抖函数：

export function _debounce (fn, delay) {
  var delays = delay || 200
  var timer
  return function () {
    var th = this
    var args = arguments
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(function () {
      timer = null
      fn.apply(th, args)
    }, delays)
  }
}

截流函数：

export function _throttle (fn, interval) {
  var last
  var timer
  var intervals = interval || 200
  return function () {
    var th = this
    var args = arguments
    var now = +new Date()
    if (last && now - last < intervals) {
      clearTimeout(timer)
      timer = setTimeout(function () {
        last = now
        fn.apply(th, args)
      }, intervals)
    } else {
      last = now
      fn.apply(th, args)
    }
  }
}

这里采用了两个方案来实现这一效果

防抖函数使用了计时器，非常常见的一种实现方法

节流函数采用的是时间差值配合计时器来实现这一效果，这两个方法都属于功能相对简单的基础封装，但可以实现绝大多数业务场景