JS之防抖和节流

2024-07-10 06:59:04

防抖 (debounce)

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

ps: 重置普攻，百度翻译要输完停止一定时间后才翻译。

没有防抖和节流的缺点：

函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。
浪费请求资源

策略：
当事件被触发时，设定一个周期延时执行动作，若周期又被触发，则重新设定周期，直到周期结束，执行动作。
在后期有拓展了前缘防抖函数，即执行动作在前，设定延迟周期在后，周期内有事件被触发，不执行动作，且周期重新设定。

案例：停止输入后将输入的字符串翻转

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>防抖 </title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: 100%;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .container {
      display: flex;
      justify-content: space-around;
      width: 800px;
      height: 400px;
      padding: 20px;
      box-shadow: 0 0 8px #222;
    }

    .container div {
      width: 350px;
      height: 380px;
      padding: 8px;
      border: 1px solid #ccc;
      font-size: 18px;
      line-height: 20px;
      word-break: break-all;
    }

    .input-box {
      color: #368;
      outline: none;
    }

    .show-box {
      color: orange;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="input-box" contenteditable></div>
    <div class="show-box"></div>
  </div>
  <script>
    var oInput = document.querySelector('.input-box')
    var oShow = document.querySelector('.show-box')
    var timeOut;//这个timeOut必须是全局变量
oInput.addEventListener('input', function () {
    timeOut && clearTimeout(timeOut);
    timeOut = setTimeout(function () {
        oShow.innerText = translate(oInput.innerText);
    }, 500);
}, false);

function translate(str) {
    return str.split("").reverse().join("");
}
  </script>
</body>

</html>

节流 (throttling)

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。**节流会稀释函数的执行频率。

对于节流，有多种方式可以实现时间戳定时器束流等。

ps : 技能CD

应用场景：

鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；
在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；
监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断；

策略：
固定周期内，只执行一次动作，若没有新事件触发，不执行。周期结束后，又有事件触发，开始新的周期。
特点：
连续高频触发事件时，动作会被定期执行，响应平滑

计时器版

var oCon = $('.container');
var num = 0;
var valid = true;
oCon.addEventListener('mousemove', function () {
    if (!valid) {
        return false;
    }
    valid = false;
    setTimeout(function () {
        count();
        valid = true;
    }, 500);
}, false);

function count() {
    oCon.innerText = num++;
}

时间戳版

var oCon = $('.container');
var num = 0;
var time = Date.now();
oCon.addEventListener('mousemove', function () {
    if (Date.now() - time < 600) {
        return false;
    }
    time = Date.now();
    count();
}, false);

function count() {
    oCon.innerText = num++;
}

束流器版

一般用在游戏中，元素以不同频率运动

这样做的好处是可以把所有元素用同一个定时器来管理，用速差来做不同频率的运动

var oCon = $('.container');
var num = 0;
var time = 0;
oCon.addEventListener('mousemove', function () {
    time++;
    if (time % 30 !== 0) {
        return false;
    }
    console.log(time)
    count();
}, false);

function count() {
    oCon.innerText = num++;
}

案例：同一个定时器中红色小球运动两次蓝色小球运动一次

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>定时器运动 </title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: 100%;
    }

    div {
      position: absolute;
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }

    .red {
      top: 100px;
      background-color: red;
    }

    .blue {
      background-color: blue;
    }
  </style>
</head>

<body>
  <div class="red"></div>
  <div class="blue"></div>
  <script src="js/common.js"></script>
  <script>
    var oRed = $('.red');
    var oBlue = $('.blue');
    var speed = 0;
    var counter = 0;
    var time;

    time = setInterval(function () {
      speed += .1;
      counter++;
      oRed.style.left = oRed.offsetLeft + speed
        + 'px';
      if (counter % 2 === 0) {
        oBlue.style.left = oBlue.offsetLeft + speed
          + 'px';
      }
    }, 1000 / 30);
  </script>
</body>

</html>

码农公寓