别再说大话，用大白话讲懂“防抖与节流”

前端

2024-02-05 19:40:45

大家好，我是技术达人，今天来和大家聊聊「防抖」与「节流」，这两个在前端开发中经常提到的概念。网上关于这两者的文章很多，但大多都是千篇一律，讲得云里雾里。今天，我就用大白话，从小白的角度来聊聊它们的特点和区别。

什么是「防抖」？

想象一下，你正在输入框中输入内容。每输入一个字符，浏览器就会触发一个事件。如果你的输入速度很快，浏览器就会疯狂地触发事件，导致大量的函数调用。这可能会导致性能问题，尤其是在需要进行昂贵的操作时。

「防抖」就是一种解决这种问题的技术。它通过创建一个定时器来延迟函数的执行。只有当事件停止触发一段时间后，定时器才会触发函数。这样一来，即使你输入得再快，函数也只会执行一次。

什么是「节流」？

「节流」与「防抖」类似，但它关注的是函数调用的频率。与「防抖」不同，「节流」会在一段时间内只允许函数执行一次，无论事件触发多少次。

「节流」经常用于需要限制函数调用频率的场景。例如，窗口调整大小或页面滚动时，你可以使用「节流」来限制回调函数的执行频率，防止页面卡顿。

「防抖」与「节流」的区别

尽管「防抖」和「节流」都是为了提高性能，但它们的工作方式不同。

防抖： 延迟函数的执行，直到事件停止触发一段时间。
节流： 限制函数的执行频率，只允许它在一段时间内执行一次。

如何使用「防抖」和「节流」

在 JavaScript 中，有很多库可以帮助你实现「防抖」和「节流」。其中最流行的库之一是 lodash。

以下是如何使用 lodash 实现「防抖」：

import { debounce } from 'lodash';

const debouncedFunction = debounce(function() {
  // 要执行的函数
}, 500);

// 监听事件
element.addEventListener('input', debouncedFunction);

以下是如何使用 lodash 实现「节流」：

import { throttle } from 'lodash';

const throttledFunction = throttle(function() {
  // 要执行的函数
}, 500);

// 监听事件
window.addEventListener('resize', throttledFunction);