揭秘JavaScript面试题之“防抖与节流”

2023-01-10 23:18:38

防抖与节流：掌握面试必备的 JavaScript 神技

对于 JavaScript 开发人员来说，"防抖"和"节流"是面试官们最爱提问的面试题之一，也是最容易被混淆的概念之一。理解并掌握这两项技术不仅可以让你在面试中脱颖而出，还能在工作中编写出更有效率的代码。

防抖

"防抖"，顾名思义，就是在某个事件发生后，在指定的时间段内只执行一次该事件的处理函数。打个比方，当你使用搜索框输入关键词时，如果每次敲击键盘都会触发一次搜索，那么服务器就会收到大量的请求，这会消耗宝贵的资源。防抖可以解决这个问题。

防抖的原理是，在事件发生时，先把事件处理函数放入一个计时器中。在规定的时间段内，如果事件再次发生，计时器就会重新启动。只有当规定的时间段内事件都没有发生时，才会执行事件处理函数。

代码示例：

const debounce = (func, delay) => {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => func(...args), delay);
  };
};

const searchInput = document.querySelector('input[type="text"]');
searchInput.addEventListener('input', debounce(() => {
  // 发送搜索请求
}, 500));

节流

"节流"与"防抖"类似，也是规定在某个时间段内只执行一次事件处理函数。但不同的是，节流无论事件在时间段内发生多少次，都只执行一次处理函数。例如，当滚动网页时，如果每滚动一个像素就触发一次滚动事件处理函数，浏览器就会被频繁调用，造成资源浪费。节流可以解决这个问题。

节流的原理是，在事件发生时，先把事件处理函数放入一个计时器中。在规定的时间段内，无论事件发生多少次，只会执行一次事件处理函数。

代码示例：

const throttle = (func, delay) => {
  let shouldRun = true;
  return (...args) => {
    if (!shouldRun) return;
    shouldRun = false;
    func(...args);
    setTimeout(() => shouldRun = true, delay);
  };
};

const scrollWindow = () => {
  // 处理滚动事件
};
window.addEventListener('scroll', throttle(scrollWindow, 500));