函数防抖和节流：实现流畅高效的事件响应

前端

2023-09-19 23:18:01

函数防抖和函数节流：优化事件响应的利器

在前端开发中，我们需要处理各种各样的事件，比如用户输入、页面滚动、按钮点击等。如果这些事件被频繁触发，就会对程序性能产生负面影响。为了解决这个问题，我们可以使用两种技巧：函数防抖和函数节流。

函数防抖

函数防抖是一种技巧，它可以让函数在一定时间内只执行一次。即使在这个时间间隔内函数被调用了多次，也只有最后一次调用会被执行。

原理

函数防抖的原理是利用计时器。当函数被调用时，计时器会重新启动。如果在计时器到期之前函数再次被调用，那么计时器会再次重新启动。只有当计时器到期时，函数才会被执行。

应用场景

函数防抖适用于处理用户输入事件，比如文本框输入事件。这样可以防止文本框的change事件被频繁触发，从而提高程序性能，减少不必要的事件处理。

代码示例

function debounce(func, wait) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}

函数节流

函数节流是一种技巧，它可以让函数在一定时间内只允许执行一次。即使在这个时间间隔内函数被调用了多次，也只有第一次调用会被执行。

原理

函数节流的原理也是利用计时器。当函数被调用时，计时器会启动。如果在计时器到期之前函数再次被调用，那么计时器会被重置。只有当计时器到期时，函数才会被执行。

应用场景

函数节流适用于处理高频事件，比如页面滚动事件。这样可以防止页面滚动事件被频繁触发，从而提高程序性能，减少不必要的事件处理。

代码示例

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