一：区别

　　首先明确一点，防抖注重清零，节流注重加锁

二：实现方式：上代码

<html>
  <body>
    <button onclick="clickBtn()">点击按钮111</button>  
    <script>
      // 普通点击
      function clickBtn(){
        console.log("普通:点击了按钮111")
      }
      // 防抖 --注重清零
      let timeC
      function clickClear(){
        if (timeC) {
          clearTimeout(timeC)
        }
        timeC = setTimeout(() => {
          console.log("防抖：点击了按钮111")
        },2000)
      }
      // 节流 --加锁
      let timeL
      function clickLock(){
        if (!timeL) {
          timeL = setTimeout(() => {
            console.log("节流：点击了按钮111")
            timeL = null;
          },2000)
        }
      }
    </script>
  </body>  
</html>

三：使用场景

　　防抖：搜索框搜索输入，只需用户最后一次输入完再发送请求、窗口大小 resize 变化后，再重新渲染 等等

　　节流：滚动加载更多、搜索框搜的索联想功能、高频点击、表单重复提交 等等