防抖和节流
- 通常高频事件:onscroll,onresize,keyup/keydown,mousemove
1. 防抖和节流原理
防抖原理
事件响应函数在一段时间后才执行,如果在这段时间内再次调用,则重新计算执行时间;
当预定的时间内没有调用该函数,则执行事件响应的函数。
节流原理
如果你持续触发事件,每隔一段时间,只执行一次事件
2. 防抖节流的实现
- 不对高频事件做任何措施,效果如图:
1)利用lodash插件中的debounce函数实现防抖
-
在线开源库可以在Staticfile CDN这里直接搜索lodash即可
-
debounce(fun,delay)
fun:执行的函数
delay:延迟时间
<body>
<div id="wrapper"></div>
</body>
<script src="https://cdn.staticfile.org/lodash.js/4.17.21/lodash.js"></script>
<script>
let count = 0
let wrp = document.getElementById("wrapper")
function wrpMove(){
wrp.innerHTML = count++
}
wrp.onmousemove = _.debounce(wrpMove,300)
</script>
- 实现防抖效果如图:
2)利用lodash插件中的throttle函数实现节流
-
throttle(fun,delay)
fun:执行的函数
delay:延迟时间
<body>
<div id="wrapper"></div>
</body>
<script src="https://cdn.staticfile.org/lodash.js/4.17.21/lodash.js"></script>
<script>
let count = 0
let wrp = document.getElementById("wrapper")
function wrpMove(){
wrp.innerHTML = count++
}
wrp.onmousemove = _.throttle(wrpMove,1000)
</script>
- 实现节流的效果如图: