js防抖和节流函数

防抖（Debounce）

• 核心原理： 在一定时间内，如果重复触发了函数，则重新计时，知道该时间内没有再次触发则执行函数。一般用于输入框搜索、窗口大小改变等场景
• 通俗理解： 假设设定的时间范围是1s。触发函数1s内没有再次触发，才会执行该函数。如果1s内重复触发则计时清零重新计时。直到大于1s的时间没有再次触发，则执行。
• 代码实现

function debounce(func, await) {
    let timer
    return function() {
        const _this = this
        const args = arguments
        clearTimeout(timer)
        timer = setTimeout(() => {
            func.apply(_this, args)
        }, await)
    }
}

//使用示例
function search() {
    console.log('执行操作')
}

const debouncedSearch = debounce(search, 500)

window.addEventListener('input', debouncedSearch)

节流（Throttle）

• **核心原理： **在一定时间间隔内，函数只会调用一次。即使在该时间间隔内重复触发函数，函数也只会按照固定的时间间隔执行。常用于滚动加载、按钮执行等场景。
• **代码实现 **

function throttle(func, await) {
    let timer = null
    return function() {
        const _this = this
        const args = arguments
        if (!timer) {
            func.apply(_this, args)
            timer = setTimeout(() => {
                timer = null
            }, await)
        }
    }
}

// 使用示例
function loadMore () {
    console.log('加载更多数据')
}

const throttledLoadMore = throttle(loadMore, 500)

window.addEventListener('scroll', throttledLoadMore)

总结

1. 防抖：在一定时间内，只有最后一次调用函数才会执行，可避免短时间内的多次无效调用，适用于搜索框输入提示等场景。
2. 节流：在一定时间内，函数只能被调用一次，可限制函数的调用频率，适用于滚动加载、按钮点击等场景。