JS函数防抖节流

在前端开发中有一部分用户行为会频繁出发事件执行。而对于DOM操作、资源加载等耗性能的处理，很可能导致界面卡顿，甚至浏览器崩溃。函数节流（throttle）和函数的防抖（debounce）就是为了解决类似需求应运而生

秒懂它们的概念

函数防抖（debounce）和函数节流（throttle）都是为了缓解函数频繁调用，它们相似，但有区别

如上图，一条竖线代表一次函数调用，函数防抖是间隔超过一定时间后才会执行，函数节流是一定时间段内只执行一次

节流(throttle)

函数节流就是预定一个函数只有大于等于执行周期时才执行，周期内调用不执行。好像水滴攒到一定重量才会落下一样。

通俗来讲节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率

• 窗口调整(size)
• 页面滚动(scroll)
• 抢购疯狂点击(mousedown)

时间戳版实现：

function throttle(func, delay) {
  let last = 0

  return function () {
    let now = +new Date()

    if (now - last > delay) {
      func.apply(this, arguments) 
      last = now
    }
  }
} 

定时器版实现：

function throttle(func, wait) {
  var timeout

  return function (){
    var _this = this
    var args = arguments

    if (!timeout) {
      timeout = setTimeout(function (){
        timeout = null
        func.apply(_this, args)  
      }, wait)  
    }
  }
}

我们应该可以很容易的发现，其实时间戳版和定时器版的节流函数的区别就是，时间戳版的函数触发是在时间段内开始的时候，而定时器版的函数触发是在时间段内结束的时候

防抖(debounce)

防抖函数就是在函数需要频繁触发情况下，只有足够空闲的时间，才执行一次。好像公家车司机会等人都上车后才出站。

通俗来讲防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间

• 实时搜索(keyup)
• 拖拽(mousemove)

function debounce(func, delay){
  var timer = null

  return function (){
    var _this = this, args = arguments

    clearTimeout(timer)
    timer = setTimeout(function (){
      func.apply(_this, args)
    }, dealy)
  }
}

参考

一图秒懂函数防抖和函数节流