const div1 = document.getElementById('div1')
// 节流函数
function throttle (fn, delay = 100) {
let timer = null
return function () {
if (timer) {
return
}
timer = setTimeout(() => {
//这里的关键就是使用箭头函数没有this 和arguements
fn.apply(this, arguments) //arguments 就是addEventListener的事件传给throttle函数
console.log(this, arguments)
timer = null
}, delay)
}
}
div1.addEventListener('drag', throttle(function(e) {
console.log(e.offsetX, e.offsetY)
}, 100))
防抖:推迟n秒后响应,如果n秒内触发该事件,则重新计时
节流:每隔n秒响应一次,n秒内触发不再响应。
相同点:都是为了限制函数的执行频率