javascript防抖和节流

一. 学习实践防抖

任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行；在触发点击事件后，如果用户再次点击了，我们会清空之前的定时器，重新生成一个定时器。也就是当持续触发某事件时，一定时间间隔内没有再触发事件时，事件处理函数才会执行一次，如果设定的时间间隔到来之前，又一次触发了事件，就重新开始延时。

const debounce = (func, time, ctx, immediate) => {
    let timer
    const rtn = (...params) => {
        clearTimeout(timer)
        if (immediate) {
            // 频繁点击的时候及清空之前的计时；重新开始计时
            let callNow = !timer
            timer = setTimeout(() => {
                timer = null
            }, time)
            if (callNow) func.apply(ctx, params)
        } else {
            timer = setTimeout(() => {
            func.apply(ctx, params)
            }, time)
        }
    }
    return rtn
}  

二 函数节流

当持续触发scroll事件或者其他事件时，并不立即执行，而是有规律的每隔一个时间间隔执行一次时间处理函数

export const Throttle = (fn, t) => {
    let last
    let timer
    let interval = t || 500
    return function () {
        let args = arguments
        let now = +new Date()
        if (last && now - last < interval) {
            clearTimeout(timer)
            timer = setTimeout(() => {
            last = now
            fn.apply(this, args)
            }, interval)
        } else {
            last = now
            fn.apply(this, args)
        }
    }
}

节流和防抖都是用来优化性能的，它们都可以用于mousemove,scroll,resize,input等事件，他们的区别在于防抖只会在连续的事件周期结束时执行一次，而节流会在事件周期内按间隔时间有规律的执行多次。