什么是防抖和节流和为什么需要防抖和节流

最新推荐文章于 2025-06-22 15:45:08 发布

原创最新推荐文章于 2025-06-22 15:45:08 发布 · 1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

js 同时被 2 个专栏收录

10 篇文章

订阅专栏

前端就业面试高新常问题型

10 篇文章

订阅专栏

本文详细介绍了前端开发中常用的防抖和节流技术，通过比喻和代码示例阐述它们如何优化项目性能，如王者回城机制和坦克大战中的子弹发射频率控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

防抖和节流

防抖和节流，作用类似，都是为了提高项目的性能。

防抖

当事件触发之后，约定单位时间（比如1s）之后，执行里面的代码；如果在单位时间只内再次触发了事件，那么要重新计时，以保证事件里面的代码只执行一次。

就像王者里的英雄一样,如果你一直按回城,回城的代码一直执行,可能会导致回城的时间回变长.所以就需要防抖来优化.

<style>
  * {
    margin: 0;
    padding: 0;
  }

  #box {
    width: 500px;
    margin: 20px auto;
  }

  ul,
  li {
    list-style: none;
  }

  input {
    width: 100%;
    height: 26px;
    line-height: 26px;
  }

  li:hover {
    background-color: beige;
  }

  ul {
    display: none;
  }
</style>


<div id="box">
  <input type="text" id="ipt">
  <ul>

  </ul>
</div>

<script src="./jquery.js"></script>

<script>

  let timer = null;

  // 当输入框的键盘弹起的时候，发送请求，获取搜索建议
  $('#ipt').on('keyup', function () {
    // 清楚前面的定时器
    clearTimeout(timer);
    // 获取输入的值（搜索关键字）
    let keywords = $(this).val();
    if (keywords === '') {
      return $('ul').empty().hide();
    }

    // 如果关键字不为空，则获取搜索建议
    // 约定 1s 之后发送请求
    timer = setTimeout(() => {
      $.ajax({
        url: 'https://suggest.taobao.com/sug',
        data: { q: keywords, code: 'utf-8' }, // 加入code参数，能够搜索多个汉字
        dataType: 'jsonp', // JSONP请求必须加这项
        success: function (res) {
          // console.log(res)
          let arr = [];
          res.result.forEach(item => {
            arr.push(`<li>${result[0]}</li>`)
          })
          $('ul').html(arr.join('')).show();
        }
      });
    }, 1000);

  })
</script>

节流

当事件触发之后，约定单位时间之内，事件里面的代码最多只能执行 1 次。所以，节流减少了单位时间内代码的执行次数，从而提高性能。

就像坦克大战一样,不管你按了多少下,子弹都是同一速度打出去,并不会子弹越来越快,可能捡了装备会让约定的单位时间变短,导致射出的子弹速度变快.

使用 timer 当做开关（节流阀）。

开关打开状态（timer = null），则允许执行代码。
开关是关闭状态（timer = 数字），则不允许执行代码。

<style>
  html,
  body {
    height: 100%;
  }

  img {
    position: absolute;
  }
</style>


<img src="./angel.gif" alt="">

<script src="./jquery.js"></script>
<script>

  let timer = null; // null，表示节流阀打开状态，允许执行事件里面的代码

  let img = $('img');
  $(document).on('mousemove', function (e) {
    // 
    console.log(111)
    // 当事件触发了，判断一下，节流阀的状态，如果是关闭状态，则不允许创建另一个定时器
    if (timer !== null) return;

    timer = setTimeout(() => {
      console.log(222);
      let x = e.pageX;
      let y = e.pageY;
      // 设置图片的css（left和top）
      img.css({ left: x + 'px', top: y + 'px' });
      // 当定时器执行完毕，重新打开节流阀
      timer = null;
    }, 16);

  });

</script>