什么防抖与节流，它们的区别是什么？应用什么场景如何实现

函数防抖（debounce）和 函数节流（throttle）都是为了限制函数的执行频次，来优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象（例如input，keyup，keydown，scroll，resize，mousemove等）

函数防抖：触发完事件 n 秒内不再触发，才执行；如果n秒内事件再次被触发，则重新计算时间

应用场景：

• 用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询ajax请求，这样可以有效减少请求次数，节约请求资源
• window的resize、scroll事件，不断地调整浏览器的窗口大小、或者滚动时会触发对应事件，防抖让其只触发一次

function debounce(fn,delay = 100){
  // 创建一个标记用来存放定时器的返回值
  let timer = null  
  return function (){
    // 每当事件触发的时候把前一个 setTimeout清除
    if(timer) clearTimer(timer) 
    // 然后又创建一个新的 setTimeout, 这样就能保证时间间隔内如果事件持续触发，就不会执行 fn 函数
    timer = setTimeout(() => {
      fn.apply(this,arguments)
      timer = null
    },delay)
  }
}

函数节流：持续触发事件，每隔一段时间，只执行一次事件（类似于技能冷却时间）

应用场景：

• 连续不断地触发某事件（如点击），只在单位时间内只触发一次

function throttle(fn,delay = 100){
  // 通过闭包保存一个标记，相当于一个开关
  let flag = true
  return function () {
    // 在函数开头判断标记定时器是否触发，如果有值return
    if (!flag) return
    flag = false
    setTimeout(() => {
      fn.apply(this, arguments)
      flag = true
    }, delay)
  }
}