js的抖动，解决方法 : 防抖&节流

更新日期: 2019-08-29阅读: 2.9k标签: 防抖分享

复制链接

新浪微博

QQ 好友

扫一扫分享

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(wait, func) {
        var beginTime = Date.now()
        return function () {
            var currentTime = Date.now()
            var space = currentTime - beginTime
            if (space >= wait) {
                func()
                beginTime = Date.now()
            }
        }
    }
    window.onscroll = throttle(1000, fn)
</script>

链接: https://fly63.com/article/detial/5602

js的抖动，解决方法 : 防抖&节流

js的抖动

解决方法 : 防抖 & 节流

Js防抖函数

浅谈js防抖和节流

在 Vue 中使用lodash对事件进行防抖和节流

手写实现防抖&节流

Vue中的防抖

抛开lodash，手写节流和防抖函数

函数防抖理解和仿写

js实现函数防抖与节流

什么是防抖和节流，他们的应用场景是哪里？

Js中防抖与节流