欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

前端的抖动与节流

程序员文章站 2024-01-03 17:54:34
...

前端的抖动与节流

一、效果展示

首先观看下面图片

  • regular正常情况
  • debounce 抖动情况
  • throttle 节流情况
    前端的抖动与节流

二、抖动 防抖

原理：
不断地触发事件，但是停下来后，只执行一次。即触发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/aaa@qq.com/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>
相关标签： +Frontend Practices/前端实战 防抖 节流 js debounce throttle

上一篇：

下一篇：

推荐阅读