高枕无忧！函数防抖与节流助你优化前端性能

2023-09-28 22:20:24

前言

在前端开发中，我们经常会遇到这样的情况：当用户在输入框中输入内容时，我们需要对输入的内容进行实时验证；当用户滚动页面时，我们需要对页面中的元素进行动态加载；当用户点击按钮时，我们需要向服务器发送请求并更新页面内容。这些操作都可能导致函数被频繁触发，如果处理不当，可能会导致页面响应速度变慢，甚至出现延迟、假死或卡顿的现象。

函数防抖和节流的原理

函数防抖和函数节流都是用来限制函数执行频率的，但它们的工作原理不同。

函数防抖 的原理是：当一个函数被多次触发时，它会在一定时间内只执行一次，如果在规定时间内函数被再次触发，则会重新计算等待时间。这种机制可以有效地防止函数被频繁触发，从而提高页面的响应速度。

函数节流 的原理是：当一个函数被多次触发时，它会在一定的时间间隔内只执行一次，即使在规定时间内函数被多次触发，它也不会执行。这种机制可以确保函数在规定时间内只执行一次，从而避免了函数被频繁触发导致的性能问题。

函数防抖和节流的用法

函数防抖和函数节流的用法都非常简单，只需要在需要限制执行频率的函数前面加上一个修饰器即可。在JavaScript中，可以使用 lodash 库提供的debounce 和 throttle 函数来实现函数防抖和函数节流。

// 函数防抖
const debouncedFunction = _.debounce(function() {
  // 要执行的代码
}, 300);

// 函数节流
const throttledFunction = _.throttle(function() {
  // 要执行的代码
}, 300);