共计 1895 个字符，预计需要花费 5 分钟才能阅读完成。
前言
无论是面试还是在讨论浏览器优化过程中，都会涉及到去抖动和节流的问题。总的来说，这二者是一种限制事件触发频率的方式。不同的是，节流会指定事件触发的时间间隔；而去抖动会指定事件不触发的时间间隔。从结果上来看，节流降低了时间处理的敏感度；而去抖对从触发事件先存储起来，等到超过指定事件间隔后，一起发送。越来越晕，直接上代码:HTML
<input type=”text” oninput=”fatch()”>
这里有一个供用户搜索使用的 input 标签，有一个 input 事件会触发的处理函数 fatch，这个 fatch 会根据 input 的 value 值向后台去请求联想词。上面代码思路是没有问题的，但是如果不做触发限制的话，可能会产生大量的 http 请求，而这些请求里面很多可能意义不大，为我们的优化提供了空间；下面，我就采用节流和去抖两种思路来解决这个问题。（一般针对 input 这种情况，使用去抖解决；这里只是方便做代码说明）
节流
function jieliu (func, time){//func 执行函数，time 时间间隔
let lastRun = null
return function(){
const now = new Date()
if(now – lastRun > time){
func(…arguments)
lastRun = now
}
}
}
const listener = jieliu(function(value){// 监听函数，指定间隔时间
console.log(value)
}, 1000)
const input = document.querySelector(“input”)
// 调用方法
input.addEventListener(“input”, function(event){
listener(event.target.value)
})
以上是比较简单的节流实现以及基本的调用方式；使用闭包是为了保存每一次执行的 lastRun。基本实现了限制请求频率的需求，但忽略了最后一个的触发。改进如下：
function jieliu (func, time){// 触发时间间隔 >time 发送请求
let lastRun = null
let timeout = undefined
return function(){
const self = this;
const now = new Date()
if(now – lastRun > time){
if(timeout){
clearTimeout(timeout)
timeout = undefined
}
func.apply(self, arguments)
lastRun = now
}
else{
if(!timeout){
timeout = setTimeout(func.apply(self, arguments), time)
}
}
}
}
加入 timeout，判断是否是最后一次请求。
去抖动
function qudou(func, time){
let timeout = undefined
return function(){
const argu = arguments
const self = this
if(timeout){
clearTimeout(timeout)
timeout = undefined
}else{
timeout = setTimeout(func.apply(this, arguments), time)
}
}
}
以上简单实现去抖动，同样，最后一次事件不能够触发处理函数。
改进如下：
function qudou(func, time){// 判断连续 time 时间内不触发，发送 func 请求
let timeout = undefined;
let lastRun = null
return function(){
const self = this
const now = new Date()
if(now – lastRun > time){
func.apply(self, arguments)
}
else {
if(!timeout){
timeout = setTimeout(func.apply(self, arguments), time)
}
else {
clearTimeout(timeout)
timeout = undefined
}
}
lastRun = new Date()
}
}
总结
通篇写下来，节流主要的实现方式还是通过对比“now”与“lastRun”的时间差，进而减少处理函数的调用次数；而防抖还是通过 settimeout 来延缓处理函数的调用时机，进而把多次触发的结果汇总一起调用处理函数。
后记
节流与去抖动两种方案还是有很大不同的，很多人包括我都很容易搞混。如果大家有更好的解决方案或者需要讨论的地方，欢迎在踊跃留言！
