面试必问防抖节流

防抖节流作为性能优化的大能，面试几乎是必考，我建议不仅要好好看，还要自己上手写一下它的代码。

我这里我简单的例子向大家介绍这两个的概念，为的就是大家都能看懂还一下就能记住。

防抖：当事件触发后，等待一段时间才会执行，如果等待时间内再次触发则重新记时。

例如：一个输入框，用户输入内容会显示和输入相关的提示：

如果是需要向后端拿数据，那么这个提示其实就是触发了接口请求。

防抖就是在用户停止输入内容一段时间后再向后端发送请求，防止用户快速输入内容导致前端一直向后端不断发送请求

代码：

js 复制代码

<body>

<input type="text" id="input" placeholder="Type here">

<script>
function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}

// 获取输入框元素
const inputElement = document.getElementById('input');

// 创建一个处理输入事件的函数
function handleInput() {
  console.log('Input value:', inputElement.value);
  // 在这里可以添加需要处理的逻辑
}

// 使用防抖函数包装输入事件处理函数，并设置延迟时间为 300 毫秒
const debouncedInputHandler = debounce(handleInput, 2000);

// 监听输入事件，并应用防抖处理
inputElement.addEventListener('input', debouncedInputHandler);
</script>

</body>

节流：多次触发事件后，每隔一段时间执行一次

例如：一个登陆按钮，你点击登陆它没反应，你就一直快速点击发现登陆进去了，其实它设定了时间间隔，假设前端设置了5s，那5s内你怎么点击都不会触发事件，5s后才会触发事件。

代码：

js 复制代码

<body>

    <ul>
        <li id="li">点击</li>
    </ul>
    <script>
function throttle(func, delay) {
  let timer;
  return function() {
    if (!timer) {
      func.apply(this, arguments);
      timer = setTimeout(() => {
        timer = null;
      }, delay);
    }
  };
}

// 使用节流函数包装需要节流处理的函数，并设置时间间隔为 500 毫秒
const throttledClickHandler = throttle(handleClick, 3000);

// 在实际使用中，例如监听点击事件时使用节流函数
 document.getElementById('li').addEventListener('click', throttledClickHandler);

function handleClick(){
    console.log('click');
}
    </script>
</body>

将func的this绑定到document.getElementById('li'),这和显示绑定有关。

说到底节流就是你被硬控了几秒，这段时间你动不了，时间过了才能动。