概述
当拖拽事件执行时,频率太快,减少事件的执行次数,以一个固定频率来执行。
示例
const div1 = document.getElementById('div1')
let timer = null
div1.addEventListener('drag', function (e) {
if (timer) {
return
}
timer = setTimeout(() => {
console.log(e.offsetX, e.offsetY)
timer = null
}, 100)
})
const div1 = document.getElementById('div1')
// 节流
function throttle(fn, delay = 100) {
let timer = null
return function () {
if (timer) {
return
}
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = null
}, delay)
}
}
div1.addEventListener('drag', throttle(function (e) {
console.log(e.offsetX, e.offsetY)
}))
apply
div1.addEventListener('drag', function(event) {
})
fn.apply(this, arguments)
:由上述代码可知,arguments参数是传递到throttle返回的函数中的,所以需要将参数传递给fn