On this page

防抖与节流

防抖

在一段时间内函数事件只会执行一次，如果在这段时间内事件被再次触发，则从头开始计算触发时间
每次触发事件时都清除之前的延时
一次点击多次，只执行最后一次

javascript

function debounce(fn, deplay = 2000) {
    let time = null
    return function () {
        clearTimeout(time)
        time = setTimeout(() => {
            fn.call(this, arguments)
        }, deplay)
    }
}

节流

事件多次执行触发，但是在一段时间只会执行一次，节流会稀释函数的执行频率
每次触发事件时都判断当前是否有等待执行的延时函数
一次点击多次，只执行第一次点击

javascript

function throttle(fn, deplay = 5000) {
    let predeplay = 0
    return function() {
        let now = +new Date()
        if (now - predeplay > deplay) {
            fn.apply(this, arguments)
            predeplay = now
        }
    }
}