JavaScript节流和防抖

一、节流

基本原理

第一次触发函数会立即执行，此后不管在一段时间间隔内触发多少次只会在一段时间之后执行一次。

代码实现

在浏览器窗口大小发生改变时，在极短时间内会频繁调用处理函数，使用节流可以提高性能。

/**
 * 节流函数，在interval时间内只能执行函数fn一次
 * @param fn 需要执行的业务函数
 * @param interval 每次函数执行的间隔时间
 */
function throttle(fn, interval) {
    let _self = fn // 保存执行的业务函数，方便在函数内部引用
    let timer = null // 预留一个变量用作存储定时器
    let isFirst = true // 判断是否是第一次执行业务函数
    return function () { // 返回待执行的加工后的业务函数
        let _args = arguments // 存储加工后的业务函数的实参
        let _me = this // 调用该函数的对象
        console.log("_me", this)
        if(isFirst) {
            _self.apply(_me, _args) // 第一次执行业务函数的时候立即执行
            return isFirst = false // 修改flag并退出
        }
        if(timer) { // 如果timer存在则直接退出
            return false
        }
        timer = setTimeout(function (){
            console.log("延时器被激活")
            clearTimeout(timer) // 在500ms后清除这个延时器
            timer = null // 把值还原程null
            _self.apply(_me, _args) //调用一次业务函数 下一次逻辑就是再重新生成一个定时器
        }, interval||500)
    }
}

window.onresize = throttle(function () {
    console.log("浏览器的尺寸发生变化")
})

二、防抖

基本原理

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

代码实现

/**
 * 防抖函数
 * @param fn
 * @param timeout
 * @param immediate
 */
function debounce(fn, timeout = 500, immediate = false){
    let timer = null
    return function (...params) {
        if(timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            timer = null
            fn.call(this, ...params)
        },timeout)
    }
}

window.onresize = debounce(function () {
    console.log("窗口大小发生改变")
})