实现函数节流与防抖，优化代码效率

前端

2024-02-05 08:06:41

掌握函数节流和防抖，提高代码性能，节省资源开销，增强程序的可用性与可维护性。

我们将在文章中以实际场景出发，深入分析代码的运行机制，帮助您掌握这些技术，编写出高效且优雅的代码。

本文将分别介绍函数节流和防抖的概念、原理，并提供大量的示例代码。

还将重点关注这两者的异同，以便您可以根据实际情况选择合适的技术，最大程度地优化代码性能。

在前端开发中，我们经常会遇到一些频繁的事件触发，比如：窗口滚动、窗口缩放、鼠标移动、键盘按下等。假如你对自己的代码不做任何处理，你会发现，这些事件会在很短的时间内被触发多次。这可能会导致性能问题，比如卡顿、延迟等。

为了解决这个问题，我们可以使用函数节流和函数防抖技术。

函数节流和函数防抖都是为了降低函数调用的频率，从而提高代码的性能。它们的主要区别在于：

函数节流： 在一段时间内，函数只会被调用一次。如果在该段时间内函数又被调用了，那么它会被忽略。
函数防抖： 在一段时间内，函数只会被调用一次。如果在该段时间内函数又被调用了，那么它会重新计时。

那么，函数节流和函数防抖应该如何使用呢？

函数节流： 适合于那些需要在一定时间间隔内执行一次的函数。比如：窗口滚动时，每隔100毫秒执行一次函数。
函数防抖： 适合于那些需要在一段时间后执行一次的函数。比如：当用户停止输入后，1秒后执行函数。

函数节流和函数防抖都是非常有用的技术，它们可以帮助我们优化代码的性能，提高程序的可用性与可维护性。

下面我们来看一些函数节流和函数防抖的示例代码：

// 函数节流
function throttle(fn, delay) {
  let timer = null;
  return function() {
    let context = this;
    let args = arguments;
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(context, args);
        timer = null;
      }, delay);
    }
  }
}

// 函数防抖
function debounce(fn, delay) {
  let timer = null;
  return function() {
    let context = this;
    let args = arguments;
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(context, args);
    }, delay);
  }
}