JavaScript is required
Back

防抖与节流函数

2022/01/11

防抖与节流函数

防抖和节流的作用都是在高频事件中防止函数被多次调用,是一种性能优化的方案。

区别在于,防抖函数只会在高频事件结束后 n 毫秒调用一次函数,节流函数会在高频事件触发过程当中每隔 n 毫秒调用一次函数。

防抖函数

触发高频事件后一段时间(wait)只会执行一次函数,如果指定时间(wait)内高频事件再次被触发,则重新计算时间。

封装

// 防抖函数
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);
  };
}

节流函数

规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效

封装

// 节流函数
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);
    }
  };
}

应用场景

常见的应用场景都是使用高频事件来调用函数的过程当中,比如应用于 window 对象的 resize、scroll 事件,拖拽时的 mousemove 事件,文字输入、自动完成的 keyup 事件。

防抖应用场景

  • scroll 事件滚动触发事件
  • 搜索框输入查询,如果用户一直在输入中,没有必要不停地调用去请求服务端接口,等用户停止输入的时候,再调用,设置一个合适的时间间隔,有效减轻服务端压力。
  • 表单验证
  • 按钮提交事件。
  • 浏览器窗口缩放,resize 事件(如窗口停止改变大小之后重新计算布局)等。

节流的应用场景

  • DOM 元素的拖拽功能实现(mousemove)
  • 搜索联想(keyup)
  • 计算鼠标移动的距离(mousemove)
  • Canvas 模拟画板功能(mousemove)
  • 射击游戏的 mousedown/keydown 事件(单位时间只能发射一颗子弹)
  • 监听滚动事件判断是否到页面底部自动加载更多

示例

<p class="codepen" data-height="600" data-theme-id="light" data-default-tab="result" data-user="xugaoyi" data-slug-hash="QWbgLMP" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="防抖与节流函数">
  <span>See the Pen <a href="https://codepen.io/xugaoyi/pen/QWbgLMP">
  防抖与节流函数</a> by xugaoyi (<a href="https://codepen.io/xugaoyi">@xugaoyi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>