JavaScript中短时间高频次触发事件的优化

Posted 2021-07-05 程序员的小傲娇

在浏览器中，如果在短时间内多次触发可以改变DOM树结构的事件，可能导致页面机构出现混乱甚至浏览器的崩溃。最近在做项目中，我无意中遇到一个问题，当滚到条到达某个高度时，使相应的元素从无到有，但是每次刷新页面后第一次到达时，鼠标滚轮都会停顿下来，经过询问老师和上网搜索，发现是监听滚动条事件造成的，因为滚动条动了一点，就会触发很多次监听事件，而且时间是极短的;所以就会造成浏览器也来不及反应，要卡在那一会。

后来我总结了几种解决方法。

一、函数节流

通过函数阻止相同的时间在较短 时间连续触发

这里通过200ms的延迟，当下次时间需要执行的时候，如果没超过200ms，会先清除原来的延时器，从新开始定时;这样可以保证两次相同的时间最少间隔在200ms以上。

二、防抖函数

防抖函数使在短时间内多次执行的事件合并成了一个时间在延迟时间后执行;

三、使用 rAF(requestAnimationFrame)

此函数是浏览器原生方法，有固定的频率，每秒执行60次函数，这样在上次函数还没结束前，下次函数不会调用执行。虽然这个方法性能更优化，但是此方法在时间上不能控制。

本文来自千锋教育，转载请注明出处。