节流防抖

转载

mb5fd86ddc9c8d5 2021-07-19 18:29:00

文章标签 应用场景鼠标移动缩放封装输入框 文章分类 代码人生

节流防抖

什么是截流防抖

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

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