JS节流

2023-03-22  本文已影响0人  owlcity

节流-throttle(性能优化方式之一)

// 未封装
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次

上一篇 下一篇

猜你喜欢

热点阅读