节流与防抖：前端面试中的必备技能

前端

2024-01-15 00:45:10

了解前端面试中臭名昭著的“节流防抖”功能？别慌，用这个动画教程轻松搞定！

嗨，亲爱的读者们！

最近一段时间没有更新文章，不过我一直在留意你们的反馈。听说你们喜欢动画，那就安排上！今天，我们就来用一个动画带你秒懂前端面试中的必备技能——节流和防抖。

节流和防抖是什么鬼？

简单来说，节流和防抖都是用来控制函数调用频率的。想象一下，当你在调整浏览器窗口大小时，频繁的resize事件可能会触发大量的函数调用。如果我们不加以控制，就会造成性能浪费，甚至卡顿。节流和防抖就是解决这类问题的利器。

节流

节流就像是一个闸门，它会限制函数在一定时间内只能调用一次。举个例子，如果你每隔100毫秒执行一次某个函数，那么节流可以让它每秒最多只执行一次。

防抖

防抖有点像蓄水池，它会收集一段时间内的所有函数调用请求，然后只执行最后一次请求。这样，可以避免函数在短时间内被重复触发。

如何用动画秒懂节流防抖

下面这个动画将形象地展示节流和防抖的工作原理：

[这里插入一个展示节流和防抖原理的动画]

如何实现节流和防抖

在JavaScript中，实现节流和防抖非常简单：

节流

function throttle(func, wait) {
  let timerId;
  return function(...args) {
    if (!timerId) {
      timerId = setTimeout(() => {
        func.apply(this, args);
        timerId = null;
      }, wait);
    }
  };
}

防抖

function debounce(func, wait) {
  let timerId;
  return function(...args) {
    if (timerId) {
      clearTimeout(timerId);
    }
    timerId = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

实际应用场景

节流和防抖在前端开发中有着广泛的应用场景，比如：