在我们做前端开发时,有时候会收到监听滚动条滚动和滚动条停止的需求,要想监听滚动条的滚动很简单,直接用window.addEventListener('scroll', function () {})
就可以实现,但是如果想要实现监听滚动条停止却似乎没那么简单了,毕竟js并没有这样的监听事件给我们,这时候可以用函数节流的方法来实现监听
函数节流的基本思想是设置一个定时器,在指定时间间隔内运行代码时清楚上一次的定时器,并设置另一个定时器,直到函数请求停止并超过时间间隔才会执行。
在javascript高级程序设计中,定义了一个方法,如下:
function throttle(method,context){
clearTimeout(method.tId);
method.tId=setTimeout(function(){
method.call(context)
},300)
}
应用在我们的需求里是这样的:
window.addEventListener('scroll', function () {
_this.show = false; //滚动时执行的方法
clearTimeout(_this.isInterval); //滚动时清除定时器
_this.isInterval = setTimeout(function(){
_this.show = true;
},500) //当停止滚动时定时器执行
})
利用这个方法,既满足了需求,也释放了浏览器的性能,避免了在滚动时要不断监听滚动条的行为
网友评论