前端面试的必杀技：函数防抖与节流

2023-09-13 03:10:52

在前端开发中，函数防抖和节流是两个至关重要的概念，它们可以极大地提升用户体验。它们在防止事件处理中的不必要调用和优化性能方面发挥着至关重要的作用。

函数防抖

函数防抖是一种技术，它会在一段时间内（例如 300 毫秒）内限制函数的执行。如果在这个时间段内再次触发该函数，那么之前的触发将被取消，而只有最后的触发才会真正执行。

函数防抖的典型应用场景是文本输入。当用户在输入框中输入时，我们通常不需要对每个按键都做出响应，而是可以等到用户停止输入一段时间后才执行某些操作，例如提交表单或搜索结果。

const debounce = (func, wait) => {
  let timeoutId = null;
  return (...args) => {
    if (timeoutId) {
      clearTimeout(timeoutId);
    }
    timeoutId = setTimeout(() => {
      func(...args);
    }, wait);
  };
};

const input = document.querySelector('input');
input.addEventListener('input', debounce((e) => {
  console.log(e.target.value);
}, 300));

函数节流

函数节流与函数防抖类似，但它的工作方式不同。函数节流会在指定的时间间隔内（例如 500 毫秒）内只允许函数执行一次。即使在这个时间段内再次触发该函数，它也不会执行。

函数节流的典型应用场景是窗口大小调整。当用户调整浏览器窗口的大小时，我们可能不需要立即对每次调整都做出响应，而是可以在每次调整之间等待一段时间后执行操作，例如重新布局页面。

const throttle = (func, wait) => {
  let lastCalled = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastCalled < wait) {
      return;
    }
    lastCalled = now;
    func(...args);
  };
};

window.addEventListener('resize', throttle(() => {
  console.log('Window size changed');
}, 500));