标签：eve leave 窗口 tip state 需求 highlight 使用 resize
我们都知道频繁触发执行一段js逻辑代码对性能会有很大的影响，尤其是在做一些效果实现方面，或者逻辑中需要进行后端请求，更是会导致卡顿，效果失效等结果，所以在处理类似的情况时，可以考虑使用函数节流和函数去抖来解决，至于具体使用哪一种方式，根据实际情况分析定夺,先来讲解一些这两者的概念
函数节流：在频繁触发的情况下，需要执行的逻辑只有执行完之后，才能继续执行下一次
函数防抖：在频繁触发的情况下，只有足够的空闲时间，才执行代码一次，如果没有执行完就清除掉，重新执行逻辑
应用场景：高频触发以下方法
函数节流和函数防抖两个概念是有很大区别的，我们用一段代码示例来看看其究竟
// 函数节流例子
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;
},
写在最后的总结
所以最重要的事情就是要首先清楚地区分二者的概念，理解实现的方法，再根据具体的需求来判断适用哪一种方法来进行优化，二者在功能实现上是有本质区别的。
标签：eve leave 窗口 tip state 需求 highlight 使用 resize
原文地址：http://www.cnblogs.com/sunmaer/p/7026391.html
