节流

节流

当持续触发事件的时候，保证一段时间内，只调用一次事件处理函数。

实际应用

• 鼠标不断点击触发，规定n秒内多次点击只生效一次。

<script>
    var btn = document.getElementById('btn')
    //节流函数
    function throttle(fn, wait) {
        let timer
        return function () {
            //如果没有计时器的话就执行
            if (!timer) {
                timer = setTimeout(() => {
                    fn()
                    //执行完事件函数后清空计时器
                    timer = null
                }, wait)
            }
        }
    }
    function handle() {
        console.log('点击')
    }
    btn.onclick = throttle(handle, 1000)
</script>

防抖与节流的区别
函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。