用游戏解锁函数防抖和节流的奥秘：拒绝“八股文”，让代码更灵动！

一、函数防抖：如同王者荣耀/英雄联盟中的回城，重复触发只执行最后一次

函数防抖是一种技术，它可以防止一个函数在短时间内被重复调用多次。当我们连续点击回城按钮时，英雄并不会立即返回基地，而是会在一段时间后才执行回城操作。这是因为王者荣耀/英雄联盟等 MOBA 类游戏中引入了函数防抖技术，以避免玩家在紧张的战斗中误操作或频繁回城而影响游戏体验。

在代码中，我们可以使用 debounce() 函数来实现函数防抖。以下是一个使用 JavaScript 实现的函数防抖示例：

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

我们可以将这个函数应用到需要防抖的场景中。例如，在文本输入框中，我们可以使用函数防抖来防止用户在快速输入时频繁触发搜索请求。

const input = document.querySelector('input');

const debouncedSearch = debounce((e) => {
  const value = e.target.value;
  // 在这里执行搜索请求
}, 500);

input.addEventListener('input', debouncedSearch);

在上面的代码中，我们使用 debounce() 函数来包装 search() 函数，并将其作为文本输入框的 input 事件处理函数。这样，当用户在文本框中输入时，搜索请求不会立即触发，而是在用户停止输入 500 毫秒后才触发。

二、函数节流：类似游戏中的技能冷却，施放技能后一段时间内再次施放无效

函数节流是一种技术，它可以限制一个函数在一定时间内只能被调用一次。在游戏中，当我们施放一个技能后，通常需要一段时间才能再次施放。这是因为游戏中的技能通常都有冷却时间，以防止玩家无限制地使用技能。

在代码中，我们可以使用 throttle() 函数来实现函数节流。以下是一个使用 JavaScript 实现的函数节流示例：

function throttle(func, wait) {
  let lastCallTime = 0;
  return function (...args) {
    const now = new Date().getTime();
    if (now - lastCallTime >= wait) {
      lastCallTime = now;
      func.apply(this, args);
    }
  };
}

我们可以将这个函数应用到需要节流的场景中。例如，在滚动事件中，我们可以使用函数节流来防止浏览器在用户快速滚动时频繁触发滚动事件。

const container = document.querySelector('.container');

const throttledScroll = throttle(() => {
  // 在这里执行滚动事件处理逻辑
}, 100);

container.addEventListener('scroll', throttledScroll);

在上面的代码中，我们使用 throttle() 函数来包装滚动事件处理函数，并将其作为容器元素的 scroll 事件处理函数。这样，当用户滚动容器元素时，滚动事件处理函数不会立即触发，而是在用户停止滚动 100 毫秒后才触发。

结语

函数防抖和函数节流是两个非常有用的 JavaScript 技术，它们可以帮助我们优化代码，提高代码的性能和用户体验。通过本文中的讲解，您应该已经对这两个技术有了初步的了解。如果您想了解更多关于函数防抖和函数节流的知识，可以参考本文中的参考文献。