防抖防抖防抖防抖防抖防抖防抖防抖防抖防抖防抖防抖防抖防抖防抖防抖防抖防抖防抖防抖防抖防抖防抖防抖防抖防抖

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>防抖</title>
    <style>
      #wrapper {
        width: 100%;
        height: 200px;
        line-height: 200px;
        text-align: center;
        color: #fff;
        background-color: #444;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <div id="wrapper"></div>

    <script>
      // 防抖的原理就是：你尽管触发事件，但是我一定在事件触发n秒无操作后才执行
      //  我们规定3s为防抖的标准，那么:
      //   1.第一次要求执行事件 - 此时倒计时3s
      //   2.倒计时2s
      //   3.倒计时1s
      //   4.0.5s时事件再次被触发 - 此时倒计时3s
      //   5.…3s内无事发生
      //   6.执行事件，共用了5.5s
      var count = 1;
      var oDiv = document.getElementById("wrapper");
      function getUserAction(e) {
       // console.log("this", this); //window
        console.log('e',e);
        oDiv.innerHTML = count++;
      }

      function debounce(fn, wait,immediate) {
        //console.log('this',this);
        var timer;
        return function () {
          var _this = this; //解决this指向问题
          var arg = arguments //记录参数
          clearTimeout(timer);
          if(immediate) {
          var callNow = !timer
          timer =setTimeout(()=>{
              timer = null
          },wait)
          if(callNow) fn.apply(_this,arg)
          } else {
              timer = setTimeout(()=>{
                  fn.apply(_this,arg)
              },wait);
          }
        };
      }
      // oDiv.onmousemove = getUserAction
      oDiv.onmousemove = debounce(getUserAction, 1000,false);

    
    </script>
  </body>
</html>