浅谈 JavaScript 函数节流

函数节流（throttle）是一种优化高频执行函数的方法，它可以确保一定时间间隔内只执行一次函数。在一些需要触发频率比较高的事件，比如页面滚动、鼠标拖拽等事件中，使用函数节流可以有效提升页面性能。

基本实现原理

函数节流的基本实现原理是设置一个定时器，再限定在指定的时间内只触发一次函数。如果在等待的时间内再次触发函数，就忽略这次触发。下面是一个基本的实现：

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

上面代码中的 throttle 函数接受两个参数，第一个是要执行的函数，第二个是时间间隔（单位为毫秒）。当函数被调用时，判断是否已经过了设置的时间间隔。如果过了，就执行函数，并记录当前时间；如果没有过，就忽略本次调用。

应用

页面滚动事件

页面滚动事件可能在短时间内被频繁地触发。在处理这种情况时，使用函数节流可以避免过度执行函数，提高页面性能。

<div id="content"></div>

function handleScroll() {
  console.log('scroll');
}

const throttledHandleScroll = throttle(handleScroll, 500);

window.addEventListener('scroll', throttledHandleScroll);

上面代码中的 handleScroll 函数用于处理滚动事件。通过使用 throttle 函数将其包装，可以确保页面滚动事件每隔 500 毫秒才会触发一次。

鼠标移动事件

类似地，鼠标移动等事件也可能在短时间内被频繁地触发。使用函数节流避免过度执行函数同样可以提高页面性能。

<div id="box"></div>

function handleMouseMove() {
  console.log('mouse move');
}

const throttledHandleMouseMove = throttle(handleMouseMove, 500);

document.getElementById('box').addEventListener('mousemove', throttledHandleMouseMove);

上面代码中的 handleMouseMove 函数用于处理鼠标移动事件。通过使用 throttle 函数将其包装，可以确保鼠标移动事件每隔 500 毫秒才会触发一次。

小结

函数节流是 JavaScript 中一种优化高频执行函数的方法，可以确保一定时间间隔内只执行一次函数，避免过度执行函数造成页面性能问题。在一些需要触发频率比较高的事件中，使用函数节流可以显著提高页面性能。