js 防抖与节流函数

函数防抖和节流是优化高频率执行js代码的一种手段，可以降低资源请求，避免浪费资源，优化体验。

一、防抖函数

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
即在n秒内连续触发的事件，只在最后一次执行。

function debounce(func, delay){
    let timer = null
    return function(...args){
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
            func.apply(this,args)
        }, delay)
    }
}

应用场景：

• 搜索框搜索输入。只需用户最后一次输入完，再发送请求。
• 手机号、邮箱等输入时的实时验证 。
• 窗口大小事件onresize，只需窗口调整完成后，计算窗口大小，防止重复渲染。

二、节流函数

每隔一段时间，只执行一次函数。

function throttle(func, delay){
    let timer = null
    return function(...args){
        if (timer) return
        timer = setTimeout(() => {
            func.apply(this, args)
            timer = null
        }, delay)
    }
}

应用场景：

• 滚动加载，加载更多或滚到底部监听
• 谷歌搜索框，搜索联想功能
• 高频点击提交，表单重复提交