resize関数の手ぶれ防止と節流の書き方

1209 ワード

//   
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を使う方法はなく、タイムスタンプを更新する方法を使っています.
もちろんレディスだけでなく、ブレ防止にも多くの面で応用されています.