美文网首页
利用函数节流实现监听滚动条停止

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

作者: 决明子120 | 来源:发表于2019-01-16 12:56 被阅读0次

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

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

    相关文章

      网友评论

          本文标题:利用函数节流实现监听滚动条停止

          本文链接:https://www.haomeiwen.com/subject/apfmdqtx.html