防抖和节流

防抖（Debounce）和节流（Throttle）是两种常见的技术，用于控制频繁触发的事件（例如，窗口调整大小、滚动、输入等）的执行次数，避免性能问题。两者的主要区别在于它们处理事件触发的方式。

防抖（Debounce)•

防抖的原理时确保在一定时间间隔内，只执行一次函数。如果在该时间间隔内再次触发事件，计时器会重新计时。防抖主要用于处理用户输入事件，如搜索框的自动补全。

防止用户误操作，优化用户体验，优化性能。

在用户操作后等待一段时间。用户在这段时间内没有再进行操作就执行函数，如果用户在这段时间内再次操作就会重新计时，再次等待，直至用户没有操作才执行函数。

function debounce(func, wait) {
    let timeout;
    return function(...args) {
        const context = this
        clearTimeout(timeout)
        timeout = setTimeout(() => func.apply(context, args), wait)
    }
}

// 使用方法
const handleResize = debounce(() => {
    console.log("window resized")
}, 300)

window.addEventListener("resize", handleResize)

节流（Throttle）•

节流的原理是确保在一定时间间隔内，函数最多只执行一次。节流主要用于处理滚动事件、窗口滚动和页面缩放等高频事件。

防止用户恶意频繁触发高消耗的操作，优化性能。

在一段时间内只会执行一次用户操作所触发的函数。在这段时间内无论用户操作多少次，都只会执行一次函数。

function throttle(func, wait) {
    let lastTime = 0
    return function(...args) {
        const now = Date.now()
        if (now - lastTime >= wait) {
            lastTime = now
            func.apply(this, args)
        }
    }
}

// 使用方法
const handleScroll = throttle(() => {
    console.log("window scrolled")
}, 300)

window.addEventListener("scroll", handleScroll)