JS节流
2023-03-22 本文已影响0人
owlcity
节流-throttle(性能优化方式之一)
- 拖拽一个元素时,要随时拿到该元素的拖拽位置
- 直接使用drag事件,则会频繁触发,很容易导致卡顿
- 节流:无论拖拽速度多快,都会每隔100ms触发一次
// 未封装
const dom1 = document.getElementById('dom1')
let timer = null
dom1.addEventListener('drag',function (e) {
if(timer) {
return
}
timer = setTimeout(() => {
console.log(e.offsetX, e.offsetY)
timer = null
}, 100)
})
// 封装
function throttle(fn, delay = 200) {
let timer = null
return function () {
if(timer) return
timer = setTimeout(() => {
fn.apply(this,arguments)
timer = null
},delay)
}
}
dom1.addEventListener('drag', throttle((e) => {
console.log(e.offsetX,e.offsetY)
}), 200)
1)此处加入防抖(debounce
)和节流(throttle
)二者为什么一个是return,一个时clearTimeout?
防抖是触发间隔大于timer才会触发,所以每次在小于间隔time要清除定时器;
节流是不管time内触发多少次,只会每间隔time时间才会触发一次,所以用return
举例:假设time = 100ms,一人每间隔50ms输入一个字符,连续输入十个,那么500ms后,防抖触发1次,节流触发5次