js防抖，节流

Posted 2020-12-20 张小中

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js防抖，节流相关的知识，希望对你有一定的参考价值。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      height: 150px;
      line-height: 150px;
      text-align: center;
      color: #fff;
      background-color: #ccc;
      font-size: 80px;
    }

    h2 {
      margin: 10px 0;
    }

    p {
      color: #666;
      margin: 0;
    }
  </style>
</head>

<body>
  <p>说明：鼠标在以下元素不断移动，将会不断执行一个数值累加事件，但中间分别加入了防抖和节流函数。</p>

  <h2>防抖</h2>
  <p>在鼠标停止移动后300ms执行一次数值累加事件。</p>
  <div id="content">0</div>
  <h2>节流</h2>
  <p>在鼠标移动过程中，每300ms执行一次数值累加事件。</p>
  <div id="content2">0</div>
</body>

</html>
<script>
  // 防抖函数
  function debounce(func, wait) {
    let timeout = null;
    return function () {
      let context = this;
      let args = arguments;
      if (timeout) clearTimeout(timeout);
      timeout = setTimeout(() => {
        func.apply(context, args)
      }, wait);
    }
  }

  // test debounce
  let num = 1;
  let content = document.getElementById(‘content‘);

  function count() {
    content.innerHTML = num++;
  };
  content.onmousemove = debounce(count, 300);



  // 节流函数
  function throttle(func, wait) {
    let timeout = null;
    return function () {
      let context = this;
      let args = arguments;
      if (!timeout) {
        timeout = setTimeout(() => {
          timeout = null;
          func.apply(context, args)
        }, wait)
      }
    }
  }

  // test throttle
  let num2 = 1;
  let content2 = document.getElementById(‘content2‘);

  function count2() {
    content2.innerHTML = num2++;
  };
  content2.onmousemove = throttle(count2, 300);
</script>

以上是关于js防抖，节流的主要内容，如果未能解决你的问题，请参考以下文章