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
       })
   }
}
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次