知识森林

Appearance

On this page

js面试题一 ​

防抖和节流 ​

  • 防抖（debounce）：触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间；
  • 节流（throttle）：高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率。
js
// 防抖函数
function debounce(fn, wait) {
    let timer = null

    return function() {
        let _this = this
        let args = arguments

        if (timer) {
            clearTimeout(timer)
        }

        timer = setTimeout(function () {
            fn.apply(_this, args)
        }, wait)
    }
}

// 使用
window.onresize = debounce(() => {
    console.log('resize')
}, 500)

// 节流
function thorttle(fn, wait) {
    let timer = null

    return function () {
        let _this = this
        let args = arguments

        if (!timer) {
            timer = setTimeout(function () {
                timer = null
                fn.apply(_this, args)
            }, wait)
        }
    }
}