js防抖与节流

1.防抖

1.1什么是防抖

• 当事件触发时，相应的函数不会被立即触发，而是会被推迟执行。
• 当事件连续密集触发时，函数的触发会被一直推迟。
• 只有当等待一段时间后也没有再次触发该事件，那么才会真正执行响应函数。

1.2应用场景

• 输入框频繁输入内容，搜索或者提交信息。
• 频繁点击按钮，触发某个事件。

1.3实现

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

2.节流

2.1什么是节流

• 节流是指当事件触发时，会执行这个事件的响应函数。
• 但是该事件如果被频繁触发，那么节流函数会按照一定的频率来执行函数。

2.2应用场景

• 滚动加载，加载更多或滚到底部监听，window.onscroll和滑到底部自动加载更多
• 高频点击提交，表单重复提交

2.3 实现

function throttle(fn,interval){
    let lastTime = 0
    const _throttle = function(...args){
        const nowTime = new Date().getTime()
        const remainTime = nowTime - lastTime
        if(remainTime > interval){
            fn.apply(this,args)
            lastTime = nowTime
        }
    }
    return _throttle
}