什么是防抖和节流？有什么区别？如何实现？

防抖：连续触发事件，只要不是最后一次触发，就不执行异步操作

<button>点我试试</button>
<script>
  var btn = document.querySelector('button')
  var timer = null
  btn.onclick = function () {
     
    // 每次执行把上一次定时器清除，第一次执行也会清除timer
    clearTimeout(timer)
    // 延时 0.5s 执行
    timer = setTimeout(() => {
     
      console.log('发送请求了。。。')
    }, 500)
  }
</script>

节流：第一次发生请求后，只要响应没回来，就不能发送第二次（定义了一个开关控制）

<button>点我试试</button>
<script>
  var btn = document.querySelector('button')
  // 节流阀 定义了一个开关
  var flag = true
  btn.onclick = function () {
     
    // 如果节流阀是开启的，才会执行操作
    if (flag) {
     
      // 一旦执行 关闭节流阀
      flag = false
      console.log('发送请求')
      setTimeout(() => {
     
        // 请求成功后，在开启节流阀
        flag = true
      }, 1000)
    }
  }
</script>

防抖和节流区别：防抖只会触发最后一次事件，节流只有请求成功返回数据后才会触发下一次事件