防抖与节流

所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间,直到执行时间结束才可以再去触发执行第二次。

所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。间隔时间通常是固定的!

俩者区别

防抖与节流最大的区别在于防抖俩次成功执行的事件中间的间隔时间不一定固定不变,因为存在重置的情况,而节流的间隔时间是固定不变的,是不会受到间隔期点击而重置计时的影响

函数防抖一定时间连续触发的事件,只在最后执行一次,而函数节流一段时间内只执行一次。防抖在频繁操作过程中会清楚上次的执行时间重新进行计算,从而只执行一次,类似于人进入电梯时电梯关门时间的处理

简单来说:你对事件3秒内执行10次的话,防抖是3秒结束后执行最后一次事件,而节流的话,假如指定节流时间1秒,那就是3秒你点了10次也只会执行3次。

// 防抖
/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒,防抖期限值
*/
export function debounce(fn, delay) {

    let timer = null
    return function () {
        if (timer) {
            clearTimeout(timer)
            console.log('拦截')
        }
        timer = setTimeout(() => {
            console.log('发送')

            fn.apply(this, arguments)
            timer = null
        }, delay)
    }
}
// 节流
/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒,防抖期限值
*/
export function throttle(fn, delay) {
    let timer = null
    return function () {
        if (timer) {
            console.log('拦截');
            return
            
        }
        timer = setTimeout(() => {
            console.log('发送');

            fn.apply(this, arguments)
            timer = null
        }, delay)
    }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值