函数节流与函数防抖（以及它们的使用场景）

admin管理员组

文章数量:1794759

函数节流与函数防抖（以及它们的使用场景）

概念

• 函数节流: 频繁触发,但只在特定的时间内才执行一次代码
• 函数防抖: 频繁触发,但只在特定的时间内没有触发执行条件才执行一次代码

两者区别在于函数节流是固定时间做某一件事，比如每隔1秒发一次请求。而函数防抖是在频繁触发后，只执行一次（两者的前提都是频繁触发）

函数节流

函数节流的应用场景一般是onrize，onscroll等这些频繁触发的函数，比如你想获取滚动条的位置，然后执行下一步动作

window.onscroll = function(){ console.log("要执行的事"); }

如果监听后执行的是Dom操作，这样的频繁触发执行，可能会影响到浏览器性能，甚至会将浏览器卡崩。 所以我们可以规定他多少秒执行一次，这种方法叫函数节流

// 限制500ms执行一次 var type = false; window.onscroll = function(){ if(type === true) return; type = true; setTimeout(()=>{ console.log("要执行的事"); type = false; },500) }

另一种类似方法

// 限制500ms执行一次 var time = null; window.onscroll = function(){ let curTime = newDate(); if(time==null){ time = curTime; } if((curTime-time)>500){ console.log("要执行的事"); } } 函数防抖

函数防抖的应用场景：输入框搜索自动补全事件，频繁操作点赞和取消点赞等等 这些应用场景，也可以通过函数节流来实现，但是相对于函数防抖来说过于复杂，毕竟专业的事专人干

实例场景：频繁操作点赞和取消点赞，因此需要获取最后一次操作结果并发送给服务器

使用函数防抖的办法 var timer = null; function click(){ clearTimeout(timer); timer = setTimeout(()=>{ ajax(...); },500) }

实现原理：如果在500ms内频繁操作点赞或者取消点赞，则每次都会清除一次定时器然后重新创建一个。直到最后一次操作点赞或者取消点赞，然后等待500ms后发送ajax

使用函数节流结合函数防抖的办法

如果想要每隔一段时间发送一次请求，而不是等到客户触发最后一次操作才发送请求，可以这样实现

var startTime = null; var timer = null; function click(){ let curTime = new Date(); startTime = startTime == null?curTime:startTime; if((curTime - startTime)>1000){ // 固定上一次操作离这一次操作间隔>1000ms，则发送一次。 //这里常用于阶段性频繁操作 startTime = curTime; // 为下一次函数触发做准备 ajax(...); }else{ // 否则则执行函数防抖 clearTimeout(timer); timer = setTimeout(()=>{ ajax(xxx); },500); } }

本文标签： 函数防抖场景