节流和防抖

防抖(debounce)

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时

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

//模拟一段ajax请求
function ajax(content) {
    console.log(`ajax request ${content}`)
}
let input = document.getElementById('debounce')
let debounceAjax = debounce(ajax, 500)
input.addEventListener('keyup', (e) => {
    debounceAjax(e.target.value)
})

应用场景：

输入框搜索联想，用户在不断输入值时，用防抖来节约请求资源

window触发resize时，不断调整浏览器窗口大小会不断触发事件，用防抖让其只触发一次

节流（throttle）

一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效

function throttle(func, delay) {
    let timer, last
    return function (...args) {
        let now = + new Date()
        if (last && now < last + delay) {
            clearTimeout(timer)
            timer = setTimeout(() => {
                last = now
                func.apply(this, args)
            }, delay)
        } else {
            last = now
            func.apply(this, args)
        }
    }
}

function ajax(content) {
    console.log(`ajax request ${content}`)
}
let throttleAjax = throttle(ajax, 1000)
let input = document.getElementById('throttle')
input.addEventListener('keyup', (e) => {
    throttleAjax(e.target.value)
})

应用场景：

监听滚动事件，比如是否滑到底部自动加载更多

对比

都是防止某一事件频繁触发

防抖是某一时间段内只执行一次，函数节流是间隔时间执行