用优美优雅的underscore写出节流函数

2023-10-03 16:53:59

节流函数的必要性
在网页开发中，我们经常会遇到一些需要限制函数执行频率的情况。例如，在文本框输入时，我们通常希望在用户停止输入一段时间后才触发搜索功能。如果我们在用户每次输入时都触发搜索功能，就会导致不必要的开销，甚至可能导致网页卡顿。

实现节流函数的多种方法

使用setTimeout：
setTimeout函数可以让我们在指定的时间后执行一个函数。我们可以使用setTimeout函数来实现节流函数。例如，我们可以使用以下代码实现一个节流函数：

function throttle(func, wait) {
  let timeout;
  return function() {
    if (!timeout) {
      timeout = setTimeout(() => {
        func.apply(this, arguments);
        timeout = null;
      }, wait);
    }
  };
}

使用时间戳：
我们可以使用时间戳来实现节流函数。例如，我们可以使用以下代码实现一个节流函数：

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

使用setTimeout + 时间戳：
我们可以将setTimeout和时间戳结合起来实现节流函数。例如，我们可以使用以下代码实现一个节流函数：

function throttle(func, wait) {
  let timeout;
  let lastTime = 0;
  return function() {
    const now = Date.now();
    if (now - lastTime >= wait) {
      func.apply(this, arguments);
      lastTime = now;
    } else {
      if (!timeout) {
        timeout = setTimeout(() => {
          func.apply(this, arguments);
          timeout = null;
        }, wait - (now - lastTime));
      }
    }
  };
}