防抖函数和节流函数的区别和应用场景，手写简单的防抖和节流函数

防抖和节流函数目前已经是前端实际开发中两个非常重要的函数，也是面试经常被问到的面试题

防抖debounce函数：

•  当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间；
• 当事件密集触发时，函数的触发会被频繁的推迟；
• 只有等待了一段时间也没有事件触发，才会真正的执行响应函数；

应用场景：

• 输入框中频繁的输入内容，搜索或 者提交信息；
• 频繁的点击按钮，触发某个事件；
• 监听浏览器滚动事件，完成某些特 定操作；
• 用户缩放浏览器的resize事件；

节流throttle函数：

• 当事件触发时，会执行这个事件的响应函数；
• 如果这个事件会被频繁触发，那么节流函数会按照一定的频率来执行函数；
• 不管在这个中间有多少次触发这个事件，执行函数的频繁总是固定的；

应用场景：

• 监听页面的滚动事件；
• 鼠标移动事件；
• 用户频繁点击按钮操作；
• 游戏中的一些设计；

手写防抖和节流函数：

防抖函数基本实现：

function debounce(fn, delay) {
  // 1.定义一个定时器 保存上一个定时器
  let timer = null
  const _debounce = function() {
    // 取消上一次的定时器
    if (timer) clearTimeout(timer)
    // 延迟执行
    timer = setTimeout(() => {
      // 外部传入要执行的函数
      fn.apply()
    }, delay)
  }
  return _debounce
}

节流函数基本实现：

function throttle(fn, interval) {
  let lastTime = 0
  const _throttle = function() {
    // 获取当前时间
    const nowTime = new Date().getTime()
    // 间隔时间 每次循环的时间 - (当前触发时间 - 上一次触发时间)
    const remainTime = interval - (nowTime - lastTime)
    if (remainTime <= 0) {
      // 执行函数
      fn()
      // 将上一次时间设为当前触发的时间
      lastTime = nowTime
    }
  }
  return _throttle
}