js 消抖（debounce）与节流（throttle）

概念

debounce 和 throttle 都是用来减小事件触发的频率，用来减小服务器请求压力，优化页面。

debounce 实现

// 接受一个函数并返回一个debounce函数
 function debounce(func, wait) {
    let timerId
    return function(...args) {
       timerId && clearTimeout(timerId)
       timerId = setTimeout(() => {
          func.apply(this, args)
       }, wait)
    }
 }

throttle 实现1

// 接受一个函数并返回一个throttle函数
function throttle(func, wait = 100) {
   let timerId
   let start = Date.now()
   return function(...args) {
     const curr = Date.now()
     clearTimeout(timerId)
     if (curr - start >= wait) {// 能够保证func必定会被执行
       func.apply(this, args)
       start = curr
     } else {
       timerId = setTimeout(() => {
         func.apply(this, args)
       }, wait)
    }
  }
}

throttle 实现2

function throttle(func, wait = 100){
    let disabled = false
    return function(...args) {
       if(valid){
           return false 
       }
       disabled = true
       setTimeout(() => {
            func.apply(this, args)
            disabled =false;
        }, delay)
    }
}

两种方法有些许区别，以点键盘输入事件为例，第一种方法事件触发次数总会比第二种多一次，可是避免最后一次输入完无响应的状况。

对比

debounce（去抖）和 throttle（节流）的对比，单纯的从中文名字理解比较难理解区别，中文是英译过来的。
去抖能够理解为去抖延时，事件只会在调用完，必定时间间隔后被触发，有一种延时的效果。
节流能够理解为节流降速，在规定时间内，无论动做调用多少次，只发一次动做，下降动做频率。

打个小比方。若是有一天你看一个网站不爽，你想手动增长他的服务器载荷，因而你使劲的点他的搜索按钮，碰巧你又是一个精力充沛的小伙，以每秒一次手速，点击了24个小时。
这个时候若是对方使用了debounce技术，间隔是2s，你会发现你点了一天一晚上，最后只请求了一次，是在最后一次点击2s以后发生。
若是对方使用了throttle技术，间隔也是2s，那么请求次数就是24x60x60/2次，无论你点击速度多快，它老是2s请求一次，很平稳。