防抖与节流：面试必备的知识点

防抖与节流

防抖和节流都是用来处理事件的一种技术，它们的目的都是为了提高程序的性能和用户体验。防抖是当一个事件在一定时间内连续触发时，只执行一次该事件的处理函数。节流是当一个事件在一定时间内连续触发时，只执行一次该事件的处理函数，但如果在该时间内该事件再次触发，则会重置该时间并重新开始计时。

防抖与节流的应用场景

防抖和节流都有各自的应用场景。防抖通常用于以下情况：

• 输入框中的文本改变时，只在用户停止输入一段时间后才触发搜索功能。
• 滚动条滚动时，只在用户停止滚动一段时间后才触发加载更多内容的功能。

节流通常用于以下情况：

• 窗口大小改变时，只在用户停止改变窗口大小一段时间后才触发调整页面布局的功能。
• 鼠标移动时，只在用户停止移动鼠标一段时间后才触发更新鼠标位置的功能。

防抖与节流的实现

防抖和节流都可以通过闭包来实现。闭包是 JavaScript 中的一个重要特性，它允许函数访问其定义作用域之外的变量。

防抖的实现

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

节流的实现

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

闭包的应用

闭包除了在防抖和节流中应用外，还在 JavaScript 开发的其他方面也有广泛的应用，例如：

• 模块化开发：通过闭包可以将代码组织成一个个独立的模块，从而提高代码的可维护性和可重用性。
• 私有变量：通过闭包可以创建私有变量，从而保护变量不被外部代码访问和修改。
• 事件处理：通过闭包可以将事件处理函数与事件源关联起来，从而方便地处理事件。

总结

防抖和节流都是用来处理事件的一种技术，它们的目的都是为了提高程序的性能和用户体验。防抖通常用于处理连续触发且不需要立即响应的事件，而节流通常用于处理连续触发且需要立即响应的事件。防抖和节流都可以通过闭包来实现，闭包是 JavaScript 中的一个重要特性，它允许函数访问其定义作用域之外的变量。闭包除了在防抖和节流中应用外，还在 JavaScript 开发的其他方面也有广泛的应用。