面试官：说说你对js中的防抖和节流的理解

站长

2023年09月28日 21:45 · 阅读数 11

前言

看到这个题目我想肯定会有人说：不会吧，都3202年了，还有人发防抖和节流的文章嘛🤣？确实，在现在的实际项目中防抖和节流对我们并不陌生，甚至经常使用，但是对它们的原理和适用的场景可能并没有那么熟悉，甚至还会搞混，那么通过本篇文章加大你对防抖和节流的认识！

话不多说，~~直接上链接！~~，不对不对，是上结论哈哈哈哈

函数节流是指一定时间内函数只执行一次。比如人的眨眼睛，就是一定时间内眨一次。函数防抖是指频繁触发的情况下，只有足够的空间时间，才执行代码一次。比如坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有别人没刷卡了，司机才开车。

一、JavaScript防抖函数

1、JavaScript防抖函数详解

防抖函数是JavaScript中常用的一种函数优化技术，可以有效减少一些高频率触发的事件所带来的性能问题。本文将详细介绍JavaScript防抖函数的实现原理、应用场景和使用方法。

2、防抖函数的实现原理

防抖函数的实现原理非常简单，就是在一定时间内只执行最后一次触发的事件，忽略之前触发的所有事件。具体实现方法如下：

1、设置一个定时器，当触发事件时，如果定时器存在，则清除定时器。

2、重新设置一个定时器，延迟一定时间后执行事件。

3、如果在延迟时间内再次触发事件，则重复1和2的步骤。

4、如果延迟时间到了，执行事件。

3、防抖函数的应用场景

防抖函数适用于一些高频率触发的事件，比如：

1、输入框实时搜索，避免频繁请求后端接口。

2、浏览器窗口resize事件，避免频繁触发DOM操作。

3、滚动条滚动事件，避免频繁更新DOM。

4、按钮点击事件，避免重复提交表单。

4、手写实现防抖函数

可以通过手写实现防抖函数，代码如下：

//JavaScript防抖核心代码
// fn: 点击按钮要执行的函数
// delay: 延迟时间
<script>
    function debounce(fn, delay) {
      let timer = null;
      return function() {
        clearTimeout(timer);
        timer = setTimeout(() => {
          fn.apply(this, arguments);
        }, delay);
      }
    }
</script>

这样用户在频繁点击按钮时，就可以执行延迟操作，防止函数多次调用，完成防抖功能；

手写实现防抖函数注意事项：

（1）、debounce函数不能直接调用fn函数，因为按钮绑定的事件函数是直接调用的，所以使用返回函数，否则函数会立即执行；

（2）、每次点击先清除延时操作，clearTimeout不能清除一个没有定义的变量名，所以需要先定义一个变量timer用来清除和定义延时操作；

（3）、在函数外层定义timer，函数内部方便使用，让这些独立的执行函数有联系；

（4）、调用函数fn，容易忽略this指向，需要将this指向调用者。

5、Lodash库实现防抖函数

Lodash是一个非常流行的JavaScript工具库，它提供了许多方便的函数，包括防抖函数。可以通过Lodash库来实现防抖函数，代码如下：

npm install -save lodash    /    npm install lodash 
 
import debounce from 'lodash/debounce';
 
function handleInput(event) {
  // 在250ms内只执行最后一次输入
}
 
const debouncedInput = debounce(handleInput, 250);
input.addEventListener('input', debouncedInput);

6、防抖函数的注意事项

1、防抖函数的延迟时间需要根据实际情况设置，设置过短可能会导致事件被频繁触发，设置过长可能会影响用户体验。

2、防抖函数返回的是一个新函数，所以需要将其赋值给原来的函数。

3、防抖函数的this指向需要明确，可以使用箭头函数或者bind方法来解决。

二、JavaScript节流函数

1、什么是JavaScript节流函数

JavaScript节流函数是一种优化技术，它可以限制函数的执行频率，从而避免在短时间内重复执行同一个函数。节流函数通常用于优化用户输入的响应、滚动事件、窗口调整等操作。当用户频繁地触发这些事件时，节流函数可以将这些事件的处理推迟到一段时间后再执行，从而避免过度的计算和渲染，提高网页的性能和用户体验。

2、JavaScript节流函数的实现原理

解析：JavaScript节流函数的实现原理很简单，它通过使用定时器来控制函数的执行频率。当用户触发一个事件时，节流函数会检查前一个事件的处理是否已经完成，如果已经完成，则立即执行当前事件的处理；否则，将当前事件的处理推迟到一段时间后再执行。这样可以避免在短时间内重复执行同一个函数，从而提高网页的性能和用户体验。

3、JavaScript节流函数的应用场景

JavaScript节流函数可以应用于很多场景，例如：

用户输入的响应：当用户在输入框中输入内容时，节流函数可以将输入的处理推迟到一段时间后再执行，从而避免在用户输入时频繁地计算和渲染。

滚动事件的处理：当用户滚动页面时，节流函数可以将滚动事件的处理推迟到一段时间后再执行，从而避免过度的计算和渲染。比如图片的懒加载

窗口调整的处理：当用户调整窗口大小时，节流函数可以将窗口调整事件的处理推迟到一段时间后再执行，从而避免在用户调整窗口大小时频繁地计算和渲染。

4、JavaScript节流函数的实例

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

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

在这个代码示例中，throttle函数接受两个参数：要执行的函数fn和延迟时间delay，它返回一个函数，这个函数用来限制fn函数的执行频率

当用户触发事件时，这个函数会检查前一个事件的处理是否已经完成，如果已经完成，则立即执行当前事件的处理，否则，将当前事件的处理推迟到一段时间后再执行。这样可以避免在短时间内重复执行同一个函数，从而提高网页的性能和用户体验。这样，无论用户点击按钮多少次，该函数都只会在1秒内执行一次，避免了不必要的性能开销。

三、总结

1、防抖就是触发事件后n秒后才执行事件处理函数，如果在n秒内又触发了事件，就会重新计时。

2、节流就是连续触发事件，在指定时间间隔内只会执行一次函数，节流会减少函数的执行频率。