为什么js里的函数节流防抖你不懂？不怪你。有两个原因。一是这两个名字是英文油门（throttle）和防抖（debounce）的直译。二是文章太多太啰嗦，让人失去重心，阅读困难。为什么需要节流和防抖？两者都是为了防止函数的频繁执行。例如：throttling（节流阀）解决以下场景：1.鼠标连续点击触发，mousedown（单位时间内只触发一次）2.上拉触底加载更多防抖（debounce）解决以下场景：1.搜索联想，当用户不断输入值时，使用防抖来保存ajax请求。2、滚动条滚动时触发该事件，不用管是什么意思，记住使用场景即可。直接上代码：throttle://模拟发送请求的功能constsend=(...args)=>{console.log(...args);console.log("发送请求");};constthrottle=(fn,time)=>{lettimer=null;//这里使用了闭包，要持久化的局部变量是timertimerreturn(...args)=>{if(timer)return;fn.call(undefined,...args);timer=setTimeout(()=>{timer=null;},时间);};};//模拟点击按钮的功能constclick=throttle(send,5*1000);click(1,2);第一次调用click事件click，timer=null，执行fn（即send函数），5s内再次调用click函数。由于定时器不为空，直接在if返回。这就实现了上面提到的场景。Debounce(去抖动)://模拟发送请求的功能constsendAjax=(...args)=>{console.log(...args);console.log("find");};constdebounce=(fn,time)=>{lettimer=null;//这里使用了闭包，要持久化的局部变量是timertimerreturn(...args)=>{if(timer!==null){clearTimeout(timer);}timer=setTimeout(()=>{fn.call(undefined,...args);},time);};};//这里是函数constsearchbarchangeexecution=debounce(sendAjax,3*1000);搜索（1,2）；当搜索框的内容改变时执行搜索功能。这时候就创建了一个3s的timer定时器。当用户在3s内再次输入内容时，将再次触发搜索功能。这是当定时器不为空时，进入if，执行clearTimeout，清除定时器，然后重新生成一个3s的定时器。这样就实现了上面提到的场景。弄清楚这个逻辑之后，实现起来就非常容易了。唯一可能引起混淆的一点是“关闭”。如果你有这样的困惑，可以阅读我的另一篇关于闭包的文章。
