函数节流（throttle）与函数去抖（debounce）

前言做过前端的童鞋应该都知道lodash这个强大的使用工具库。为什么要写这篇文章呢，主要今天遇到一个问题，socket推送消息太频繁，导致saga频繁更新，页面有所卡顿，需要通过函数节流控制，发现自己突然不会写这样的代码，而且模糊了节流和抖动的区别。简单实现一下，源码其实复杂的多。区别节流：一些场景频繁触发，导致页面崩溃，资源加载重复等行为，需要控制执行频率，这个时候就叫做节流。去抖：主要针对的是频繁触发某个事件后，然后进行后续处理的场景。常见的就是频繁输入停止3s(假设)后进行查询等操作。.debounce函数接口定义：@param fn实际需要调用的函数@param second 空闲时间@return callback 返回调用函数const debounce = (fn, second) => { let timer = null return () => { clearTimeout(timer) timer = setTimeout(() =>{ fn() }, second) }}.throttle函数接口定义：@param delay延迟时间@param fn需要调用的函数@return cb返回函数const throttle = (fn, delay) => { let last = 0 return () => { let current = new Date() if(current-last > delay) { fn() last = current } }}