前端的抖动与节流

喜欢ヅ旅行 2022-11-29 12:53 157阅读 0赞

### 前端的抖动与节流 ###

*  一、效果展示
 *  二、抖动 防抖
 *  三、节流
 *  四、示例代码

# 一、效果展示 #

首先观看下面图片

*  regular正常情况
 *  debounce 抖动情况
 *  throttle 节流情况  
    ![在这里插入图片描述][20200821102255809.gif_pic_center]

# 二、抖动 防抖 #

原理：  
不断地触发事件，但是停下来后，只执行一次。即触发N次Function，但只执行最后的一次Function。

使用场景：  
滚动、鼠标移动、window resize、防抖动事件、键盘事件keydown keyup

主体代码:

var timer = null;
    function debounce(func, time, _this) { 
      var arg = arguments;
      clearTimeout(timer);
      timer = setTimeout(function () { 
        func.apply(_this, arg)
      }, time);
    }

# 三、节流 #

原理：  
不断地触发事件，但是只会在指定的时间内执行一次。即触发N次Function，但只在时间段内执行一次Function。

使用场景：  
滚动、鼠标移动、window resize、键盘事件keydown keyup、按钮抢票、秒杀等

主体代码:

// 方案1 利用时间戳
    var prevTime = new Date().getTime();
    function throttle(fn, time, _this) { 
      var currentTime = new Date().getTime();
      if (currentTime - prevTime > time) { 
        prevTime = currentTime;
        fn.apply(_this);
      }
    }

# 四、示例代码 #

下面是以jquery库做的展现效果  
下载地址： [index.html][]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
      <title>Document</title>
      <style> .container { display: flex; height: 600px; } .left, .right { flex: 1; height: 100%; } .left { background: #f5f5f5; border: 1px solid #cccccc; padding: 20px; } .rightbox { height: 33.33%; display: flex; } .rightbox>div { flex: 1; } .text { display: flex; justify-content: center; align-items: center; } .line, .line2 { height: 100%; width: 1px; } .line2 { background: transparent; } .regular, .debounce, .throttle { display: flex; flex-direction: row; overflow: hidden; } .regular .line { background: #c4c6e1; } .debounce .line { background: green; } .throttle .line { background: #e8b4b4; } </style>
    
    </head>
    
    <body>
      <div class="container">
        <div class="left">
          move your mouse here
        </div>
        <div class="right">
          <div class="rightbox">
            <div class="text">
              regular
            </div>
            <div class="regular">
    
            </div>
          </div>
          <div class="rightbox">
            <div class="text">
              debounce
            </div>
            <div class="debounce">
    
            </div>
          </div>
          <div class="rightbox">
            <div class="text">
              throttle
            </div>
            <div class="throttle">
    
            </div>
          </div>
        </div>
      </div>
    </body>
    <script> // 抖动 var timer = null; function debounce(func, time, _this) { var arg = arguments; clearTimeout(timer); timer = setTimeout(function () { func.apply(_this, arg) }, time); } // 节流 var prevTime = new Date().getTime(); function throttle(fn, time, _this) { var currentTime = new Date().getTime(); if (currentTime - prevTime > time) { prevTime = currentTime; fn.apply(_this); } } $(document).ready(function () { $('.left').mousemove(function (event) { var temp = '<div class="line"></>'; var temp2 = '<div class="line2"></>'; // reular $('.regular').append(temp); $('.debounce').append(temp2); $('.throttle').append(temp2); // debounce debounce(function () { $('.debounce').append(temp); $('.debounce').find('.line2').last().remove(); }, 5000, this); // throttle throttle(function () { $('.throttle').append(temp); $('.throttle').find('.line2').last().remove(); }, 5000, this) }) }) </script>
    
    </html>

[20200821102255809.gif_pic_center]: /images/20221124/92cd1a201d754f72b6599fe638705f7e.png
[index.html]: https://download.csdn.net/download/aa390481978/12737447