节流和防抖

老师，可以解释下什么是节流和防抖吗

慕函数525419 2020-06-28

收起

2回答

好帮手慕粉回答被采纳获得+3积分 2020-06-28 19:02:16

同学你好，可以参考以下例子：

<!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>
      body {
        height: 2000px;
      }
    </style>
  </head>
  <body>
    <script>
      // 防抖
      function debounce(fn, wait) {
        var timeout = null;
        return function () {
          if (timeout !== null) clearTimeout(timeout);
          timeout = setTimeout(fn, wait);
        };
      }
      // 处理函数
      function handle() {
        console.log(Math.random());
      }
      // 滚动事件
      window.addEventListener("scroll", debounce(handle, 1000));
    </script>
  </body>
</html>

当持续触发scroll事件时，事件处理函数handle只在停止滚动1000毫秒之后才会调用一次，也就是说在持续触发scroll事件的过程中，事件处理函数handle一直没有执行。

同学可以自行测试一下。

祝学习愉快~

收起回答

好帮手慕粉 2020-06-28 17:47:06

同学你好，关于同学的问题回答如下：

1、函数防抖和节流，都是控制事件触发频率的方法。

2、函数防抖，这里的抖动就是执行的意思，而一般的抖动都是持续的，多次的。假设函数持续多次执行，我们希望让它冷静下来再执行。也就是当持续触发事件的时候，函数是完全不执行的，等最后一次触发结束的一段时间之后，再去执行。触发事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。

2、节流的意思是让函数有节制地执行，而不是毫无节制的触发一次就执行一次。节流就是保证一段时间内只执行一次核心代码。事件触发时，在n秒内只会执行一次，所以节流会稀释函数的执行频率。

如果我的回答帮助了你，欢迎采纳。祝学习愉快~

收起回答