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("窗口大小发生改变")
})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值