防抖

·  阅读 48
<!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>

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改