前端经典面试题合集, 什么是防抖和节流?如何用 JS 编码实现?

QA

Step 1

Q:: 什么是防抖（Debounce）？如何用 JS 实现？

A:: 防抖是一种优化函数执行频率的技术，即让某个函数在特定时间内只执行一次，而不是在某个事件连续触发时频繁执行。常用于处理用户输入、窗口大小调整等场景。用 JS 实现防抖的例子如下：

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

Step 2

Q:: 什么是节流（Throttle）？如何用 JS 实现？

A:: 节流是一种控制函数执行频率的技术，即让某个函数在特定时间间隔内最多执行一次，而不是在某个事件连续触发时频繁执行。常用于滚动事件、窗口大小调整等场景。用 JS 实现节流的例子如下：

 
function throttle(func, limit) {
  let inThrottle;
  return function() {
    const context = this;
    const args = arguments;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

Step 3

Q:: 防抖和节流有什么区别？

A:: 防抖是在事件连续触发时，仅在最后一次触发后的一段时间内才执行函数；节流是在事件连续触发时，每隔固定时间执行一次函数。简单来说，防抖是减少函数执行次数，而节流是限制函数执行频率。

Step 4

Q:: 你在项目中遇到过哪些需要使用防抖或节流的场景？

A:: 例如在搜索框输入时使用防抖，避免用户每输入一个字符都发起一次搜索请求；在滚动事件中使用节流，避免频繁触发滚动处理函数导致性能问题。

前端经典面试题合集, 什么是防抖和节流?如何用 JS 编码实现?

前端经典面试题合集, 什么是防抖和节流?如何用 JS 编码实现?

QA

Step 1

Step 2

Step 3

Step 4

用途

相关问题