利用函数节流实现监听滚动条停止

在我们做前端开发时,有时候会收到监听滚动条滚动和滚动条停止的需求,要想监听滚动条的滚动很简单,直接用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)  //当停止滚动时定时器执行
            })

利用这个方法,既满足了需求,也释放了浏览器的性能,避免了在滚动时要不断监听滚动条的行为

猜你喜欢

转载自blog.csdn.net/weixin_42252416/article/details/86505998