JS节流函数详解|极客教程

JS节流函数详解

什么是节流函数？

在开发中，我们会遇到一些需要频繁触发的事件，比如滚动事件、窗口改变大小事件等等。而如果我们在频繁触发事件的情况下直接执行相应的处理函数，很可能会导致网页卡顿、性能下降等问题。这时就需要使用节流函数来控制事件的触发频率，以提高性能和用户体验。

节流函数的作用就是控制某个函数在一定时间内只能被触发一次，即使在这段时间内多次触发该函数，也只会执行一次。

节流函数的实现原理

实现一个节流函数的关键是利用定时器。当第一次触发事件时，设置一个定时器，在规定的时间内不再接受触发事件。直到定时器时间到，才能再次触发事件。

节流函数的应用场景

节流函数在以下场景中非常常用：

页面滚动事件，比如加载更多数据；
窗口大小改变事件，比如响应式布局；
鼠标移动事件，比如拖拽操作。

节流函数的两种实现方式

方式一：使用定时器实现节流函数

function throttle(func, wait) {
  let timer = null;
  return function (...args) {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, args);
        timer = null;
      }, wait);
    }
  };
}

调用方式如下：

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

window.addEventListener('scroll', throttle(handleScroll, 200));

运行结果：

滚动事件被节流，每200毫秒只触发一次。

方式二：使用时间戳实现节流函数

function throttle(func, wait) {
  let previous = 0;
  return function (...args) {
    let now = Date.now();
    if (now - previous > wait) {
      func.apply(this, args);
      previous = now;
    }
  };
}

调用方式同方式一。

运行结果同样是每200毫秒触发一次滚动事件。