防抖和节流原理和实现

防抖和节流原理和实现

1. 防抖

原理 多少时间内无论操作多少次只触发一次

实现方式

/**
 * 防抖
 * @params {Function} fn 回调
 * @params {Number} 延迟
 * @params {Boolean} immediate 是否先执行
 */
const debounce = function debounce(fn, wait, immediate = false) {
    let timer = null
    return function () {
        const context = this
        const args = arguments

        if (timer) {
            clearTimeout(timer)
        }

        if (immediate) {
            const callNow = !timer
            if (callNow) {
                fn.apply(context, args)
            }
            timer = setTimeout(() => {
                timer = null
            }, wait)
        } else {
            timer = setTimeout(() => {
                fn.apply(context, args)
            }, wait)
        }
    }
}

2. 节流

原理 某个时间间隔只触发一次

实现方式

/**
 * @params {Function} fn 回调
 * @params {Number} wait 延时
 * @params {Number} type 模式 1:定时器，2:时间戳 
 * 
 */
const throttle = function throttle(fn, wait, type) {
    if (type === 1) {
        let timer = null
        return function () {
            const context = this
            const args = arguments
            if (!timer) {
                timer = setTimeout(() => {
                    fn.apply(context, args)
                    clearTimeout(timer)
                    timer = null
                }, wait)
            }
        }
    } else {
        let prevTime = 0
        return function () {
            const context = this
            const args = arguments
            if (Date.now() - prevTime >= wait) {
                prevTime = Date.now()
                fn.apply(context, args)
            }
        }
    }
}

调用示例

<button id="clickMe">点我</button>

<script>
const clickMe = document.getElementById('clickMe')
clickMe.addEventListener('click', throttle(() => {
  console.log(1)
}, 1000, 2), false)
</script>