前端面试题

1. 防抖和节流：

防抖和节流都是前端开发中常用的一种优化技术，主要是为了减少一些高频率触发的事件如输入框输入、页面滚动等的性能问题。

防抖（Debouncing）：指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。可以理解为“稀释”事件的执行次数，最终只有最后一次事件会被触发。

比如说，当用户在输入框中输入文字时，每当用户输入一个字符都会触发 onInput 事件，如果我们立即去请求接口进行搜索、过滤等操作，会造成大量的请求，这样会导致浏览器卡顿或者接口服务器崩溃。所以我们就可以通过防抖的方式来进行优化，将事件的多次触发合并为一次，减少请求次数，提高性能。

实现防抖的方式，通常是在事件处理函数中设置一个定时器，在定时器时间内再次触发该事件时，将重新计时，直到定时器时间到达后，才真正执行事件处理函数。具体实现方法如下：

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

// 使用方法
element.addEventListener('input', debounce(handleInput, 1000));

上面的代码中，debounce 函数接受两个参数：要执行的函数 func 和延迟时间 delay。它返回一个新函数，该函数使用了闭包，在内部保存了 setTimeout 返回的定时器 ID。每次调用该函数时，都会清除之前的定时器，并重新启动一个新的定时器，以达到防抖的效果。

节流（Throttling）：指连续触发事件但是在 n 秒内只执行一次函数。可以理解为“限制”事件的执行次数，确保在 n 秒内最多只能触发一次事件。

例如，当用户滑动页面时，会触发scroll事件，如果我们立即去更新页面的状态，会导致频繁的重排和重绘，进而影响性能。所以我们可以通过节流的方式来进行优化，将事件的触发频率降低，减少资源消耗，提高性能。

实现节流的方式，通常是设置一个时间戳，在一段时间内只允许事件处理函数执行一次。具体实现方法如下：

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

// 使用方法
element.addEventListener('scroll', throttle(handleScroll, 1000));

上面的代码中，throttle 函数接受两个参数：要执行的函数 func 和延迟时间 delay。它返回一个新函数，该函数使用了闭包，在内部记录了上一次执行函数的时间戳 prevTime。每次调用该函数时，都会获取当前时间戳 currentTime，如果距离上一次执行函数的时间超过了规定的延迟时间 delay，就会执行事件处理函数，并将当前时间戳赋值给 prevTime。

需要注意的是，防抖和节流并不是万能的优化方法，需要根据具体场景来选择使用。例如，在一些需要实时响应的场景下，比如音视频播放等，就不能使用防抖和节流，否则会影响用户体验。