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

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

作者: 决明子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)  //当停止滚动时定时器执行
            })

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

相关文章

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

    在我们做前端开发时,有时候会收到监听滚动条滚动和滚动条停止的需求,要想监听滚动条的滚动很简单,直接用window....

  • 节流

    节流(throttle) 节流函数:只允许一个函数在N秒内执行一次。滚动条调用接口时,可以用节流throttle等...

  • 实现个简单的防抖节流

    什么是防抖和节流?有什么区别?如何实现? 节流是在一定时间内只能触发一次,可以应用于监听滚动条,减少同一时间触发的...

  • lodash中的debounce和throttle

    input输入调用接口,实时搜索解决方案:使用防抖,用户停止输入指定时间后执行搜索函数 监听滚动条的滚动距离,右下...

  • SocialCalc即时渲染-SocialCalc.MouseW

    添加滚动条监听事件,实现滚动即时渲染 其中参数:

  • 防抖和节流

    防抖节流实现与原理 我们都知道,当我们平时在开发的时候会遇到一些场景,例如说监听滚动条,移动到一定位置的时候,会出...

  • 手写代码系列(持续更新)

    1、手写instanceOf的实现原理 2、手写节流和防抖函数 2.1 节流函数 节流函数原理:规定在一个单位时间...

  • 节流函数及其应用

    建议使用 lodash 插件里面的 throttle 函数来实现 1、节流函数简单原理 2、节流函数的应用

  • vue中实现防抖和节流

    防抖函数的使用场景: 频繁触发、输入框搜索 节流函数的使用场景:频繁触发、onrize,onscroll滚动条

  • Javascript函数节流(throttle)和函数去抖(de

    函数节流(throttle)和去抖(debounce)的应用场景,一般伴随着客户端DOM事件监听。举个例子,实现一...

网友评论

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

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