防抖和节流

防抖 事件频繁触发，我们需要打断之前的事件触发，做保留最后一次触发

使用场景

• 搜索框输入事件，当用户停止输入一段时间后触发搜索事件。
• 游戏回城事件，当英雄移动或者释放技能或者受到伤害的时候，都能打断当前回城事件。

/**
 * 封装防抖函数
 * @param {Function} callback 需要执行的回调函数
 * @param {Number} delay 间隔时间
 * @returns 节流函数
 */
function debounce(callback, delay = 500) {
  let timer = null 
  // 使用闭包把timer变量捕获
  return function() {
    if (timer) clearTimeout(timer)
    timer = setTimeout(()=>{
      // 这里callback函数其实是window在调用，所以我们需要通过call函数把调用者改为this，也就是我们想要的dom元素
      callback.call(this, ...arguments)
      // 可替换下方代码 
      // callback.apply(this, arguments)
    }, delay)
  }
}
// 获取dom元素
let inp = document.querySelector('input')
inp.oninput = debounce(function(){
  console.log(this.value)
})

节流 事件频繁触发，我们需要每隔一段时间触发一次。

使用场景

• window滚动事件，我们想每隔500ms干一些事情，而不是每次滚动都干事情，这就需要我们使用节流。
• 游戏中技能CD，我们按技能后都需要隔一段时间才能再次触发，冷却期间不管我们按多少次都不会触发技能。

/**
 * 封装节流函数
 * @param {Function} callback 需要执行的回调函数
 * @param {Number} delay 间隔时间
 * @returns 节流函数
 */
function throttle(callback, delay = 500) {
  let flag = true
  return function () {
    if (flag) {
      setTimeout(() => {
        callback.call(this, ...arguments)
        flag = true
      }, delay)
    }
    flag = false
  }
}
// 滚动事件
window.onscroll = throttle(function () {
  console.log(123);
})