scroll到底怎么避免多次触发事件

Question

这个逻辑判断问题出在哪里呢?

Answer 1

可以添加一个时间变量,然后每次触发的时候跟这个时间变量比较,看是否大于一定的时间比如 10ms,如果不大于就不执行操作,如果大于就执行操作,通过控制触发的时间,来避免频繁的调用.

或者使用requestAnimationFrame 来处理会更平滑一些,requestAnimationFrame会在每次动画重绘之前调用,这样避免在重绘之间无谓的调用多次.

requestAnimationFrame

Answer 2

站内搜索 节流
https://segmentfault.com/a/11...

Answer 3

防抖和节流的方案有很多，楼上的两位都可以！

针对你的代码里，硬蛋吧islock放在scroll外面，因为每次滚动触发事件时，都会重置islock变量，导致每次都会执行！

Answer 4

函数防抖 和函数截流：
都是在时间轴上控制函数的执行次数，以此优化性能，防止不必要的函数调用。

• 防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。 场景：缩放浏览器窗口，如果在代码中约定，浏览器窗口被缩放一秒后，回调再执行，那么，当用户快速缩放的话，只有做后的一个缩放事件才会触发回调，中间的事件，会被忽略
• 截流：规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。还是上面那个例子，如果约定单位时间为一秒，那么，当用户快速缩放窗口的话，就会每隔一秒，触发一次回调。