函数节流、防抖揭秘：前端开发的利器

前端

2023-09-06 15:17:42

函数节流与函数防抖的原理

函数节流

函数节流的原理是在一段时间内只允许函数执行一次，无论函数被触发了多少次。这可以防止函数在高频事件中被重复调用，从而降低对浏览器的压力。

函数防抖

函数防抖的原理是在一定时间内只允许函数执行一次，但如果函数在时间间隔内被重复调用，那么函数将在时间间隔结束后才执行一次。这可以防止函数在短时间内被重复调用，从而提高函数的执行效率。

函数节流与函数防抖的应用场景

函数节流

函数节流通常用于处理高频事件，例如滚动事件、鼠标移动事件、输入框输入事件等。在这些场景中，如果函数被重复调用，可能会导致浏览器卡顿或崩溃。因此，使用函数节流可以有效减少函数调用的次数，从而提高应用程序的性能。

函数防抖

函数防抖通常用于处理需要一定时间才能完成的操作，例如表单提交、搜索请求等。在这些场景中，如果函数在时间间隔内被重复调用，可能会导致操作重复执行或产生不必要的结果。因此，使用函数防抖可以防止函数在短时间内被重复调用，从而提高函数的执行效率。

如何在日常开发中应用函数节流与函数防抖

在日常开发中，我们可以使用一些工具或库来实现函数节流与函数防抖。例如，我们可以使用Lodash库的throttle和debounce方法来实现函数节流与函数防抖。

// 使用 Lodash 库实现函数节流
const throttledFunction = _.throttle(function() {
  // 函数体
}, 100);

// 使用 Lodash 库实现函数防抖
const debouncedFunction = _.debounce(function() {
  // 函数体
}, 100);

也可以使用原生JavaScript实现函数节流与函数防抖。

// 使用原生 JavaScript 实现函数节流
function throttle(func, wait) {
  let lastCall = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastCall >= wait) {
      func(...args);
      lastCall = now;
    }
  };
}

// 使用原生 JavaScript 实现函数防抖
function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func(...args);
    }, wait);
  };
}