js的抖动及防抖和节流

Posted lc-meng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js的抖动及防抖和节流相关的知识,希望对你有一定的参考价值。

 js的抖动

   在 js 中 改变窗口大小 & 上下滚动滚动条 & 反复向输入框中输入内容 ... , 如果绑定了相应的事件 , 这些事件的触发频率非常高, 严重影响用户体验和服务器的性能 , 这种问题 在js中 就叫 js 的抖动 .

解决方法 : 防抖 & 节流 

js的防抖

  就是在 触发事件 中设置一个定时器来延迟 绑定事件 的生效 , 并且每次在 触发事件 中清除定时器 , 直到两次 触发事件 生效的间隔 能够触发定时器才会时 绑定事件 生效 (持续触发并不会对应函数 , 只有当两次触发间隔一定的时间才会执行对应的函数)

    <style>
       .mybox {
            width: 600px;
            height: 1500px;
            background-color: pink;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="mybox"></div>
</body>
<script>
    var timer;
    window.onscroll = function () {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            console.log(‘我滚啦‘)
        }, 1000)
    }
</script>

 

js的节流

  触发事件时 , 每隔固定时间 执行一次函数

   步骤 : 

      1.进入触发函数中先 获取 一次当前时间 beginTime

      2.返回一个匿名函数

        a.在获取一次当前时间 currentTime

        b.得到两次获取时间的差值 cpace

        c.将space 与间隔时间进行比较 , 如果不小于间隔时间就调用执行函数 , 并且此时获取当前时间赋值给 beginTime

     <style>
      .mybox {
            width: 600px;
            height: 1500px;
            background-color: pink;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="mybox"></div>
</body>
<script>
    function fn() { //执行函数
        console.log(‘我滚啦‘)
    }
    function throttle(waitfunc) {
        var beginTime = Date.now()
        return function () {
            var currentTime = Date.now()
            var space = currentTime - beginTime
            if (space >= wait) {
                func()
                beginTime = Date.now()
            }
        }
    }
    window.onscroll = throttle(1000fn)
</script>

 

以上是关于js的抖动及防抖和节流的主要内容,如果未能解决你的问题,请参考以下文章

☀️七分钟学会手写防抖和节流

一文读懂函数的防抖和节流

事件的防抖和节流

JS基础-防抖和节流

JS的防抖和节流

lodash的防抖和节流方法