防抖节流函数

防抖和节流都是一种优化前端性能的方法。

防抖函数：n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

<script>
    // 清楚上一个定时器，只有最后一个定时器在执行
    window.addEventListener("resize", debounce(() => {
        console.log(111)
    }, 1000))

    // 防抖函数
    function debounce(fn, time) {
        // 设置变量储存定时器
        let timer = null
        return function () {
            // 清除上一个定时器
            if (timer) {
                clearTimeout(timer)
            }
            // 产生一个新的定时器
            timer = setTimeout(fn, time)
        }
    }
</script>

节流函数：n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效

<script>
    const btn = document.querySelector("#btn");

    // 节流函数
    function throttle(fn, time) {
        let loading = false
        return function (...args) {
            if (loading) return
            loading = true
            // 操作
            fn.apply(this, args)
            setTimeout(() => {
                // loading 还原为false
                loading = false
            }, time)
        }
    }

    // loading 思想
    btn.addEventListener("click", throttle(() => {
        console.log(111)
    }))
</script>

防抖：指的是在事件被触发n秒后再去执行回调函数。如果在这n秒内又被触发了该事件，则重新计时。

防抖的实现一般是通过setTimeout或者clearTimeout来实现的。在事件触发时设置一个定时器，再次触发该事件时，先清除上一次的定时器，重新设置定时器。这样可以确保回调函数只会被执行一次。

节流：指的是在一段时间内只执行一次回调函数。可以将一些高频率的事件（如鼠标移动、滚动等）降低触发的频率，来减少浏览器的负担。

节流的实现一般是通过设置一个定时器，每次触发事件时判断当前时间与上一次执行回调函数的时间间隔是否达到设定的阈值，如果达到阈值，则执行回调函数，否则不执行。

两者的区别在于，防抖是在一定时间内只执行一次回调函数，而节流是在一段时间内有限制地执行回调函数。