【手撕代码系列】JS手写实现节流函数

公众号：Code程序人生，分享前端所见所闻

在前端开发中，我们经常会遇到需要限制某些事件的触发频率的情况，例如防止用户短时间内多次点击按钮、滚动事件频繁触发等。这时，我们可以使用节流函数来限制事件的触发频率，以减轻浏览器的负担并提高性能。

什么是节流函数

节流函数是一种限制事件触发频率的函数，它可以确保在一定时间内只执行一次回调函数，从而避免事件的频繁触发。节流函数的实现有两种常见方式：定时器和时间戳。

定时器方式实现节流函数

定时器方式实现节流函数的思路是，在事件触发时先判断定时器是否存在，如果不存在则创建一个定时器，在一定时间间隔后执行回调函数并清除定时器。如果定时器已存在，则不执行回调函数，直接返回。
以下是使用定时器方式实现节流函数的代码：

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

其中，fn是要限制触发频率的回调函数，delay是限制时间间隔，单位为毫秒。

时间戳方式实现节流函数

时间戳方式实现节流函数的思路是，在事件触发时先记录当前时间戳，然后再判断当前时间戳与上次执行回调函数的时间戳的时间间隔是否超过限制时间间隔，如果超过则执行回调函数并更新上次执行回调函数的时间戳。如果未超过，则不执行回调函数，直接返回。
以下是使用时间戳方式实现节流函数的代码：

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

节流函数的应用场景

节流函数可以应用于多种场景，例如：

• 频繁的滚动事件：当用户快速滚动页面时，频繁触发滚动事件会影响页面的性能。使用节流函数可以限制滚动事件的触发频率，提高页面的性能。
• 多次点击按钮：当用户多次点击按钮时，频繁触发点击事件会导致重复的操作。使用节流函数可以限制点击事件的触发频率，避免用户误操作。
• 输入框搜索：当用户在输入框中输入关键词时，频繁触发搜索事件会浪费资源并影响用户体验。使用节流函数可以限制搜索事件的触发频率，减轻服务器的负担并提高用户体验。

总结

节流函数是一种非常有用的函数，它可以限制事件的触发频率，提高页面的性能并提高用户体验。在实际开发中，我们可以根据不同的场景选择不同的实现方式，例如定时器方式和时间戳方式。使用节流函数可以有效避免频繁触发事件导致的性能问题，并且可以让用户获得更好的交互体验。