防抖函数 节流函数

225 阅读1分钟

节流函数

所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数。

function throttle(fun, delay){
    let pre = Date.now()
    return function() {
        let now = Date.now()
        let arg = arguments
        if (now - pre > delay) {
            fun.apply(this, arg)
            pre = Date.now()
        }
    }
}

使用:

function use() {
    console.log('test')
}
window.addEventListener('scroll', throttle(use, 1000))

防抖函数

所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。

let debance = function(func, delay) {
        let time
        return function () {
            let context = this
            let arg = arguments
            if (time) clearTimeout(time)
            time = setTimeout(()=> {
                func.apply(context, arg)
            }, delay)
        }
    }

使用:

function use() {
    console.log('test')
}
window.addEventListener('scroll', debance(use, 1000))