揭秘JavaScript中的防抖和节流：面试中的关键要素

2024-01-17 20:23:52

在JavaScript中，防抖和节流都是非常有用的技术，可以帮助我们提高程序的性能和用户体验。

防抖可以防止函数在短时间内被多次调用，这对于一些需要在用户输入时进行操作的函数非常有用。例如，我们有一个搜索框，当用户输入时，我们需要进行搜索。如果我们不使用防抖，那么当用户快速输入时，函数可能会被调用多次，这会浪费资源并导致程序性能下降。

节流可以防止函数在指定时间内被多次调用，这对于一些需要在特定时间间隔内执行的函数非常有用。例如，我们有一个轮询函数，需要每隔一段时间检查一次服务器是否有新的数据。如果我们不使用节流，那么函数可能会在短时间内被调用多次，这会浪费资源并导致程序性能下降。

防抖和节流的原理都很简单，但它们实现起来却并不容易。在JavaScript中，我们可以使用setTimeout和clearTimeout函数来实现防抖和节流。

以下是防抖的实现代码：

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

以下是节流的实现代码：

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

防抖和节流在JavaScript中有很多应用场景，例如：