提示:
本文为JavaScript栏目:JavaScript高级学习:事件的防抖和节流01——介绍事件的防抖和节流
JavaScript高级学习:事件的防抖和节流01——介绍事件的防抖和节流
防抖和节流
防抖和节流严格来说属于WebAPI的性能优化。
mousemove事件举例说明遇到的问题
加入我们给某个DOM元素绑定一个mousemove事件。如下代码所示。
HTML
<style>
#app{
height: 200px;
line-height: 200px;
width: 200px;
text-align: center;
background-color: #00F7DE;
margin: 500px auto;
}
</style>
<body>
<div id="app">
1
</div>
</body>
<script>
let app=document.getElementById("app");
function counteAddNum(ev) {
app.innerHTML = parseInt(app.innerHTML)+1;
}
app.onmousemove=counteAddNum
</script>
效果:
轻微的移动都会使DOM多次触发移动事件,本事件的执行频率实在太高了。
实际上我们并不需要如此高频的事件触发,毕竟浏览器的性能是有限的,不应该浪费在这里,所以接着讨论如何优化这种场景。
防抖
首先提出第一种思路,在第一次触发事件时,不立即执行函数,而是给出一个冷却时间delay,然后:
如果在delay时间内没有再次触发滚动事件,那么就执行函数
如果在delay时间内再次触发滚动事件,那么当前的计时取消,重新开始计时
简单来说就是把事件的触发当做成一个技能。在技能释放的时候需要delay时间的蓄力,而且不能被打断,如果被打断则会重新开始蓄力。
节流
其次是第二种思路。
如果短时间内大量触发同一事件,那么在函数执行一次之后,该函数在指定的时间期限内不再工作,直至过了这段时间才重新生效。
简单来说就是给技能加一个冷却时间,事件触发后开始冷却,冷却时间内不能再触发。