前言
防抖与节流是陈词滥调的话题了，不论是在面试还是理论开发中都常常波及。
本文将介绍防抖与节流的概念、利用场景、代码实现，其中代码实现参考了 lodash 的源码，剔除了其中参数类型与运行环境的检测，使代码更简洁易懂，不便学习了解。
概念与利用
防抖与节流都是为了防止代码被频繁执行
防抖
防抖（debounce）：在下达指令后会开始计时，如果在计时范畴内又反复下达指令，就从新计时，期待计时实现后才执行代码。
打个比方：公交车进站，行人陆续上车，假如等待时间是20秒，那就只有继续20秒无人上车时，公交车才会开走(执行代码)。
节流
节流（throttle）：在代码执行后进入冷却，冷却期间不会反复执行，冷却到了才会再次执行。
打个比方：女神每天回复舔狗一次，明天回复过后即使舔狗发再多信息，女神也只会等到第二天才回复(再次执行代码)。
利用场景
在说利用场景之前，先对立防抖和节流的概念
节流是蕴含最大时限的防抖
解释一下：假如100秒内继续频繁下达指令，防抖的处理结果就是100秒后才会执行，但这样对用户极不敌对的。往往会在防抖代码中加一个最大时限，当达到最大时限时，即使依然在等待时间内下达指令，但代码也会执行一次。这就变成了节流。
防抖与节流个别利用于 搜寻提醒、页面滚动等
也用来限度那些频繁触发又不确定次数的事件：mousemove、scroll、resize
目前浏览器性能过剩，为了用户良好的体验，以上这些场景根本都采纳了节流。
代码实现
在下面也说过了，防抖与节流的区别就在于是否具备最大时限
所以在实现方面，先实现防抖函数，在后续加上最大时限来使其变为节流函数
在写代码前，要明确要实现的函数的参数、返回值
- 函数须要传入两个参数，别离为想要限度执行频率的函数与延迟时间（单位为毫秒）
- 函数的返回值也是一个函数，是与传入函数性能雷同，曾经防抖动的函数
因为在实现期间须要波及到三个函数，为了防止凌乱，在此对立一下称说：
- 咱们行将要实现的函数，命名为
debounce，下文称作内部函数 - 曾经防抖动的函数，也就是内部函数的返回值，命名为
debounced，下文称作防抖函数 - 须要防抖动的函数，也就是用户调用内部函数时传入的函数，命名为
func，下文称作外部函数
而对于外部函数，因为其函数并不会立即执行，也就不应该具备返回值
意识 requestAnimationFrame
基于 setTimeout 实现的防抖/节流函数网上已有很多，lodash 源码中应用的是 requestAnimationFrame，其性能与稳定性都要优于 setTimeout，所以本文也基于 requestAnimationFrame 实现
requestAnimationFrame() 须要传入一个函数作为参数，该函数会在浏览器下一次重绘之前执行
浏览器的重绘频率是每秒 60 次，约 16ms 重绘一次。
能够简略的将 requestAnimationFrame 函数视为提早为16ms 的 setTimeout 函数
防抖函数实现
防抖函数代码实现如下，每次调用防抖函数都会从新计时，因为是基于 requestAnimationFrame，须要递归开启计时器
/** * @description: * @param {Function} func 要防抖的函数，外部函数 * @param {number} wait 等待时间 * @return {Function} 已防抖的函数 */function debounce(func, wait) { let lastArgs, // 保留参数 lastThis, // 保留this timerId, // 定时器id lastCallTime // 最近调用防抖函数的工夫 // 重置定时器 function startTimer(pendingFunc) { // 勾销掉上一次开启的定时器 cancelAnimationFrame(timerId) // 开启新的定时器并返回定时器id return requestAnimationFrame(pendingFunc) } // 检测是否到了该执行的工夫 function shouldInvoke(time) { const timeSinceLastCall = time - lastCallTime // 间隔上一次防抖函数的调用已超过等待时间 return timeSinceLastCall >= wait } // 调用外部函数 function invokeFunc() { // 获取之前保留的this与参数 const args = lastArgs const thisArg = lastThis // this与参数置空，不影响垃圾回收 lastArgs = lastThis = undefined func.apply(thisArg, args) } // 传入定时器的回调函数 // 一直获取以后工夫判断是否应该调用外部函数 function timerExpired() { const time = Date.now() if (shouldInvoke(time)) { // 执行外部函数 timerId = undefined invokeFunc() } else { // 递归开启定时器 timerId = startTimer(timerExpired) } } // 返回的防抖函数，该函数无返回值 function debounced(...args) { const time = Date.now() // 更新this与参数 lastArgs = args lastThis = this // 更新防抖函数调用的工夫 lastCallTime = time // 开启定时器 timerId = startTimer(timerExpired) } return debounced}// 测试性能let preTime = Date.now()const func = () => { let nextTime = Date.now() console.log(nextTime - preTime) preTime = nextTime}const dfunc = debounce(func, 50)dfunc()dfunc()// 通过50ms后，控制台打印50setTimeout(() => { dfunc() dfunc()}, 100)// 通过150ms后，控制台打印100节流函数实现
在 lodash 中，节流函数与防抖函数专用一套代码，只是配置参数不同，本文也将复用之前的代码
节流函数比防抖函数多两个特点
- 节流函数蕴含最大时限(maxWait)，这是防抖函数与节流函数的区别
- 节流函数往往会立即执行外部函数一次(leading)
残缺代码如下：
/** * @description: * @param {Function} func 要防抖的函数，外部函数 * @param {number} wait 等待时间 * @param {number|undefined} maxWait 最大时限，有的话是节流函数，没有的话是防抖函数 * @param {boolean} leading 规定在提早开始前是否调用外部函数，默认不调用 * @return {Function} */function debounce(func, wait, maxWait = undefined, leading = false) { let lastArgs, // 保留参数 lastThis, // 保留this timerId, // 定时器id lastCallTime, // 最近调用防抖函数的工夫 lastInvokeTime // 最近调用外部函数的工夫，0初值确保 let maxing = !!maxWait // 是否指定了最大等待时间 // 最大时限不应该小于等待时间 if (maxWait) { maxWait = Math.max(wait, maxWait) } // 重置定时器 function startTimer(pendingFunc) { cancelAnimationFrame(timerId) return requestAnimationFrame(pendingFunc) } // 检测是否到了该执行的工夫 function shouldInvoke(time) { const timeSinceLastCall = time - lastCallTime const timeSinceLastInvoke = time - lastInvokeTime // 上次外部函数工夫尚未定义 (首次执行节流函数) // 间隔上一次防抖函数的调用已超过等待时间 (防抖函数的性能) // 设置了最大时限，且间隔上次外部函数的调用已达到最大时限 (节流函数的性能) return ( lastInvokeTime === undefined || timeSinceLastCall >= wait || (maxing && timeSinceLastInvoke >= maxWait) ) } // 调用外部函数 function invokeFunc(time) { // 获取之前保留的this与参数 const args = lastArgs const thisArg = lastThis // this与参数置空，不影响垃圾回收 lastArgs = lastThis = undefined // 更新最近外部函数的调用工夫 lastInvokeTime = time func.apply(thisArg, args) } // 一直获取以后工夫判断是否应该调用外部函数 function timerExpired() { const time = Date.now() if (shouldInvoke(time)) { timerId = undefined // 如果曾经立即执行外部函数 // 且等待时间内没有再次调用节流函数的话 // 就不须要在等待时间过后再次执行外部函数了 if (lastArgs) invokeFunc(time) } else { // 从新开启定时器 timerId = startTimer(timerExpired) } } // 返回的防抖函数，该函数无返回值 function debounced(...args) { const time = Date.now() // 这里检测是否应该重置定时器 const isInvoking = shouldInvoke(time) // 更新this与参数 lastArgs = args lastThis = this // 更新防抖函数调用的工夫 lastCallTime = time if (isInvoking) { if (timerId === undefined) { // 首次执行节流函数，更新外部函数调用工夫 lastInvokeTime = time timerId = startTimer(timerExpired) // 检测leading属性，立刻调用外部函数 if (leading) invokeFunc(time) } else if (maxing) { // 节流性能，执行外部函数并重置定时器 timerId = startTimer(timerExpired) invokeFunc(time) } } else if (timerId === undefined) { // 外部函数刚执行完又调用了节流函数 // 只开启定时器，无需更新外部函数调用工夫 timerId = startTimer(timerExpired) } } return debounced}/** * @description: * @param {Function} func 要防抖的函数，外部函数 * @param {number} wait 冷却工夫 * @param {boolean} leading 规定在提早开始前是否调用外部函数，默认调用 * @return {Function} */function throttle(func, wait, leading = true) { return debounce(func, wait, wait, leading)}// 测试性能let preTime = Date.now()let arr = []const func = () => { let nextTime = Date.now() arr.push(nextTime - preTime) preTime = nextTime}const tfunc = throttle(func, 100, false)let id = setInterval(tfunc, 10)setTimeout(() => { clearInterval(id) console.log(arr) // [112, 101, 104, 103, 100, 100, 100, 101, 106, 101]}, 1000)其余性能实现
来看一个业务场景吧
鼠标悬停在按钮上 0.5 秒后呈现按钮的性能提醒，有多个按钮，只显示最初鼠标悬停的按钮的性能提醒，很显著要用防抖来实现
然而如果用户在 0.5 秒内从按钮移出，理当不显示提醒，但防抖函数的定时器曾经设置，0.5 秒后提醒仍旧显示，很显著的 bug
所以，防抖函数身上应该有个勾销定时器的性能
function debounce(func, wait, maxWait = undefined, leading = false) { …… debounced.cancel = function () { // 革除定时器 if (timerId !== undefined) { cancelAnimationFrame(timerId) } // 清空变量 lastArgs = lastThis = timerId = lastCallTime = lastInvokeTime = undefined } return debounced}结语
置信通过本文的浏览，您对防抖与节流肯定有较深的了解了
本文代码实现只提取了 lodash 源码中外围的局部，且做了肯定的批改
lodash 提供的其余配置项与性能在业务中极少应用，本文便不做介绍了，有趣味的能够自行去查看
如果文中有不了解或不谨严的中央，欢送评论发问。
如果喜爱或有所帮忙，心愿能点赞关注，激励一下作者。