防抖和节流防抖和节流的区别防抖：n秒执行一次函数，如果n秒内再次执行，那么这个n秒重新计时节流：连续执行函数，但是n

防抖和节流的区别

防抖：n秒执行一次函数，如果n秒内再次执行，那么这个n秒重新计时

节流：连续执行函数，但是n秒内只执行一次

防抖

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

场景：有一个输入框，输入之后才会调用接口获取联想词。但是，因为频繁调用接口不太好，所以在代码中使用防抖功能，只有在用户输入完毕的一段时间后，才会调用接口出现联想词

手撕防抖

// 这是一个点击增加按钮
<body>
    <button id="add">点击+1</button>
    <script>
        let addBtn = document.getElementById('add')
        let count = 0
        function addOne() {
            count++
            console.log(count)
        }

        function debounce(fn, time) {
            let timer
            return function () {
                clearTimeout(timer)
                timer = setTimeout(() => {
                    fn.apply(this, arguments)
                }, time);
            }
        }
        addBtn.addEventListener('click', debounce(addOne, 2000))
    </script>
</body>

节流

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

场景：监控鼠标滚轮，监听滚动条位置，防止按钮多次点击

手写节流

function scrollTest() {
    console.log('被触发了')
}
function throttle(fn, time) {
    let t1 = 0 // 初始时间
    return function () {
        let t2 = new Date() //当前时间
        if (t2 - t1 > time){
            fn.apply(this, arguments)
            t1 = t2
        }
            
    }
}

document.addEventListener('scroll', throttle(scrollTest, 3000))