防抖与节流——前端开发的绝佳搭档

前端

2023-11-11 07:26:21

在前端开发中，我们经常会遇到这样的场景：当用户在页面上频繁触发某个事件时，比如点击按钮、滚动页面、输入文本等，就会导致大量的回调函数被调用，从而导致页面发生抖动甚至卡顿。为了解决这个问题，我们可以使用防抖与节流技术来对回调函数进行优化。

防抖

防抖的原理是，在一定时间内，只允许触发一次回调函数。如果在时间间隔内再次触发回调函数，则取消前一次触发的回调函数，只执行最后一次触发的回调函数。

防抖可以有效地防止页面抖动和卡顿，特别是在用户频繁触发某个事件时。比如，在用户输入文本时，我们可以使用防抖技术来防止输入框的input事件过于频繁地触发，从而避免页面卡顿。

节流

节流的原理是，在一定时间内，只允许触发一次回调函数。与防抖不同的是，节流不会取消前一次触发的回调函数，而是等到时间间隔结束后再执行回调函数。

节流可以有效地防止页面抖动和卡顿，但它不如防抖那么有效。因为节流会导致回调函数的执行延迟，这可能会影响用户体验。

区别

防抖与节流的主要区别在于，防抖只允许触发一次回调函数，而节流允许触发多次回调函数，但会延迟回调函数的执行。

在实际开发中，我们可以根据不同的场景来选择使用防抖还是节流。比如，在用户输入文本时，我们可以使用防抖技术来防止输入框的input事件过于频繁地触发，从而避免页面卡顿。而在用户滚动页面时，我们可以使用节流技术来防止scroll事件过于频繁地触发，从而避免页面抖动。

代码示例

下面是一个防抖函数的代码示例：

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

下面是一个节流函数的代码示例：

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