JS 函数防抖和函数节流
我们都知道频繁触发执行一段js逻辑代码对性能会有很大的影响,尤其是在做一些效果实现方面,或者逻辑中需要进行后端请求,更是会导致卡顿,效果失效等结果,所以在处理类似的情况时,可以考虑使用函数节流和函数去抖来解决,至于具体使用哪一种方式,根据实际情况分析定夺,先来讲解一些这两者的概念
函数节流:在频繁触发的情况下,需要执行的逻辑只有执行完之后,才能继续执行下一次
函数防抖:在频繁触发的情况下,只有足够的空闲时间,才执行代码一次,如果没有执行完就清除掉,重新执行逻辑
应用场景:高频触发以下方法
- 页面滚动监听(onscroll)
- 窗口resize事件,等到窗口变化结束后才进行业务逻辑的运行
- 鼠标键盘 mousedown/keydown 事件
- 鼠标的进入移出事件(mouseenter/mouseleave)
- DOM 元素的拖拽功能实现(mousemove)
- 输入框搜索等(keyup)
函数节流和函数防抖两个概念是有很大区别的,我们用一段代码示例来看看其究竟
// 函数节流例子 var can = true; window.onscroll = function(){ if(!can){ //判断上次逻辑是否执行完毕,如果在执行中,则直接return return; } can = false; setTimeout(function(){ //执行逻辑 can = true; }, 100); };
可以看出上一次的逻辑必须执行完毕之后,才会执行下一次的逻辑,如果我们不做函数节流,因为滚动是一个频繁的操作,会被时时刻刻监听到,执行多次逻辑的触发,做了节流会在一定程度上控制逻辑的触发
// 函数防抖 var timer = null; window.onscroll = function(){ if (timer) { // 清除未执行的逻辑,重新执行下一次逻辑,不论上一次是否执行完毕 clearTimeout(timer); } timer = setTimeout(function(){ //执行逻辑 }, 300); };
在函数防抖这个例子中,可以看出当事件被监控触发时候,不论上一次的逻辑有没有执行完毕,都要清除掉重新执行,函数防抖会更加降低事件被触发的频率。
真实使用案例讲解:在一个列表页面,当鼠标进入到列表中某一项时显示一段tip提示语(提示语的内容需要请求接口获得),移出时隐藏提示语框。(提示语是当前列表项的相关内容)
图示:这样一整个列表,当我们鼠标放到订正情况上时候需要显示订正情况的详细信息,而有时我们鼠标滑过的时候可能把每一条的逻辑都触发,但是这并不是我们想要的,我们只想最后鼠标留在哪条数据上,才显示哪一段数据的逻辑,所以根据情况的分析,我们这种情况适用的是 函数去抖
代码:
<!--html 一段mvvm框架的dom书写--> <td ms-mouseenter="toggleItem(true,item)" ms-mouseleave="toggleItem(false,item)"> <span>{{item.info}}</span> <div ms-class="show:item.isVisible"> <p>item需要显示的内容</p> </div> </td> var event = null, toggleItem:function (state,item) { if (state==true) { if (event) { clearTimeout(event); } event =setTimeout(function () { //执行item的请求显示内容逻辑 },100); } item.isVisible = state; },
写在最后的总结
所以最重要的事情就是要首先清楚地区分二者的概念,理解实现的方法,再根据具体的需求来判断适用哪一种方法来进行优化,二者在功能实现上是有本质区别的。