防抖和节流

防抖及应用场景

防抖，顾名思义，防止抖动，以免把一次事件误认为多次事件
防抖重在清零 clearTimeout(timer)

场景①： 登录、发送短信等按钮避免用户点击太快，以致于发送多次请求，需要防抖
场景②： 调整浏览器窗口大小，resize次数过于频繁，造成计算过多，此时需要一次到位
场景③： 文本编辑实时保存，当无需任何更改操作一秒后进行保存

function debounce(fn, wait) {
	let timer
  return	(...args) => {
  	clearTimeout(timer)
    timer = setTimeout(() => {
    	fn(...args)
    }, wait)
  }
}

节流及应用场景

节流，顾名思义，控制事件发生的频率 ，如控制1s发生一次，甚至1分钟发生一次。与服务端(server)及网关(gateway)控制的限流(Rate Limit)类似。
节流重在开关锁 time= setTimeout，timer=null

场景①：scroll事件，每隔1秒计算一次位置信息等。
场景②：浏览器播放事件，每隔1秒计算一次进度信息等。

function throttle(fn, wait) {
	let timer
  return (...args) => {
  	if(timer) return
    timer = setTimeout(() => {
    	fn(...args)
      timer = null
    }, wait)
  }
}