JavaScript 防抖和节流详解

前言

在 JavaScript 开发中，我们经常会遇到一些高频触发的事件，如 resize、scroll、input等，这些事件在触发时由于其高频次和高并发性，往往会造成网页的性能问题，影响用户体验。所以我们需要一些手段来限制这些事件的触发次数、缩短响应间隔，以避免过度渲染，浪费资源等性能问题。

常见的限制高频触发的方法，有防抖和节流两种，他们可以帮助我们在一定程度上减少不必要的重复的 DOM 渲染及一些函数的运算次数，从而提升页面的性能。

本文将详细介绍什么是防抖和节流，以及如何实现它们。

防抖

定义

防抖是指在事件触发的 n 秒后，执行一次函数，若在这 n 秒内又触发了事件，则重新计时。

应用场景

常用于用户输入，交互按钮等高频触发事件。

实现

function debounce(fn, delay) {
  let timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  };
}

实现原理：每次事件触发时，清除计时器，再次开启定时器，延迟执行待执行的函数。

示例

<input type="text" id="input" />
<script>
  function handleInput() {
    console.log('发起请求');
  }
  const debounceHandleInput = debounce(handleInput, 500);
  document.getElementById('input').addEventListener('input', debounceHandleInput);
</script>

在输入框中不断输入，会发现当停止输入超过 500ms 后才会显示“发起请求”。

节流

定义

节流是指在事件触发后的 n 秒内，只执行一次函数，若在这 n 秒内又触发了事件，则会被忽略。

应用场景

常用于高频触发的事件，如用户滚动页面、mousemove 等。

实现

function throttle(fn, delay) {
  let lastTime = 0;
  return function() {
    let nowTime = Date.now();
    if (nowTime - lastTime > delay) {
      fn.apply(this, arguments);
      lastTime = nowTime;
    }
  };
}

实现原理：使用时间戳记录当前事件触发的时间，当当前时间距离上一次触发的时间小于规定时间时，节流会忽略该事件请求。

示例

<div style="height: 3000px"></div>
<script>
  function handleScroll() {
    console.log('触发');
  }
  const throttleHandleScroll = throttle(handleScroll, 500);
  window.addEventListener('scroll', throttleHandleScroll);
</script>

在页面滚动时，可以通过控制台发现，函数只会在每 500ms 执行一次，避免了过多的函数的执行。