Js面试之防抖与节流

最近在整理一些前端面试中经常被问到的问题，分为vue相关、react相关、js相关、react相关等等专题，可持续关注后续内容，会不断进行整理~

防抖（Debounce）和节流（Throttle）是两种常见的 JavaScript 性能优化技巧，主要用于限制某个函数的执行频率，以避免过度频繁地触发。

防抖

防抖的基本思想是将多个连续的函数调用合并成一次单一的函数调用。具体实现方式是设置一个定时器，在指定的时间间隔内，如果有新的函数调用触发，则清除之前的定时器并重新设置。这样，只有当函数调用的间隔大于设定的时间间隔时，函数才会被执行。

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

// 使用
const debouncedFunction = debounce(() => {
  console.log('Debounced function is executed');
}, 200);

// 在需要防抖的地方调用debouncedFunction

节流

节流的基本思想是规定一个单位时间，在这个单位时间内，只能执行一次函数。如果在该单位时间内触发了多次函数调用，只有一次会被执行，其他会被忽略。

function throttle(func, delay) {
  let lastExecTime = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastExecTime >= delay) {
      func.apply(this, args);
      lastExecTime = now;
    }
  };
}

// 使用
const throttledFunction = throttle(() => {
  console.log('Throttled function is executed');
}, 200);

// 在需要节流的地方调用throttledFunction

二者区别

触发方式不同

• 防抖是在最后一次函数调用后经过一段时间才执行。
• 节流是每隔一段时间执行一次函数。

执行时间点不同

• 防抖在最后一次函数调用后经过一定时间执行。
• 节流是在每个单位时间内的第一次调用执行。

适用场景不同

• 防抖适用于用户输入（例如搜索框），避免连续快速触发导致频繁请求。
• 节流适用于高频事件（例如滚动、拖拽），确保一定时间内只执行一次，控制函数的执行频率。