节流和防抖知道吗？

面试官:节流与防抖，说说两者各自适用场景？

回答：面试官，在前端开发中，节流（Throttle）和防抖（Debounce）是两种常用的优化高频率执行JavaScript代码的技术。我将分别阐述它们的概念、适用场景，并给出代码示例。

首先解释一下防抖（Debounce）：
防抖是指在事件被触发后延迟一段时间后再执行回调，如果在这段延迟时间内事件又被触发，则重新计算延迟时间。防抖适用于那些对连续的事件响应不是必须且不影响用户体验的情况，例如搜索输入框输入时的自动补全功能。下面是一个简单的防抖函数实现：

 复制代码
function debounce(func, wait) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(function(){
      func.apply(context, args);
    }, wait);
  };
}
// 使用例子
const handleSearch = debounce(function() {
  // 触发搜索请求逻辑
}, 500);
// 监听输入框的输入事件
input.addEventListener('input', handleSearch);

 复制代码
function throttle(func, wait) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    if (!timeout) {
      timeout = setTimeout(function(){
        timeout = null;
        func.apply(context, args);
      }, wait);
    }
  };
}
// 使用例子
const handleResize = throttle(function() {
  // 处理resize逻辑，例如重新计算布局
}, 200);
// 监听窗口的resize事件
window.addEventListener('resize', handleResize);