resize函数防抖和节流写法

// 防抖
function debounce(operate, delay) {
    let time = null
    let timer = null
    let newTime = null
    function task() {
        newTime = +new Date()
        if(newTime - time < delay){
            timer = setTimeout(task, delay)
        }else {
            operate()
            timer = null
        }
        time = newTime
    }
    return function () {
        // 更新时间戳
        time = +new Date()
        if(!timer){
            timer = setTimeout(task, delay)
        }
    }
}

function printWidth() {
    console.log(window.document.body.clientWidth)
}

window.addEventListener('resize', debounce(printWidth, 500), false)
// 节流
function throttle(fn, wait) {
     let previous = 0
     return function (...args) {
         let now = +new Date()
         if(now - previous >= wait) {
             fn.apply(this, args)
             previous = now
         }
     }
}

function task() {
    console.log(window.document.body.clientWidth)
}

window.addEventListener('resize', throttle(task, 500), false)

这里仅仅做个记录,忘记了也可以回顾

没有用频繁removeTimeout和setTimeout的方法,用了更新时间戳的方式

当然不仅是针对resize事件的,防抖在很多方面都有应用

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值