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