基础02-防抖和节流

节流和防抖

题目

节流和防抖有何区别？分别用于什么场景？

防抖

防抖，即防止抖动。抖动着就先不管它，等啥时候静止了，再做操作。

例如，一个搜索输入框，等输入停止之后，自动执行搜索。

代码参考 debounce.html

debounce

搜索

<script>
    function debounce(fn, delay = 200) {
        let timer = 0

        return function () {
            if (timer) clearTimeout(timer)

            timer = setTimeout(() => {
                fn.apply(this, arguments) // 透传 this 和参数
                timer = 0
            }, delay)
        }
    }

    const input1 = document.getElementById('input1')
    input1.addEventListener('keyup', debounce(() => {
        console.log('发起搜索', input1.value)
    }), 300)
</script>

节流

节流，即节省交互沟通。流，可理解为交流，不一定会产生网络流量。

例如，drag 的回调，上传进度的回调，都可以设置一个固定的频率，没必要那么频繁。

代码参考 throttle.html

throttle

可拖拽

<script>
    function throttle(fn, delay = 100) {
        let timer = 0

        return function () {
            if (timer) return

            timer = setTimeout(() => {
                fn.apply(this, arguments)
                timer = 0
            }, delay)
        }
    }

    const div1 = document.getElementById('div1')
    div1.addEventListener('drag', throttle((e) => {
        console.log('鼠标的位置', e.offsetX, e.offsetY)
    }))
</script>

答案

防抖和节流都用于处理频繁触发的操作，优化操作体验。

触发频率

• 防抖，不固定
• 节流，固定

场景

• 防抖，结果式，即一次调用即可
• 节流，过程式，即需要持续一个过程，一次不够

划重点

• 抓住“触发频率”是否固定，即可抓住重点
• 实际项目推荐使用 lodash

参考资料：来源于网络