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事件的,防抖在很多方面都有应用

 

你可能感兴趣的:(javaScript)