JS节流

节流-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次