介绍一下js的节流与防抖?

在JavaScript中，防抖（debounce）和节流（throttle）是两种常见的技术，用于优化事件的处理器函数，使其在一定时间内只执行一次或者限制其执行的频率。

防抖（Debounce）

防抖是一种防止函数在短时间内频繁执行的技术。当你持续触发事件时，防抖函数会忽略掉中间的事件，只处理最后一次。常用于输入框实时搜索，用户频繁输入时，只处理最后一次输入。

以下是一个简单的防抖函数的实现：

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

在这个例子中，每次调用返回的函数时，它都会清除之前的定时器并设置一个新的定时器。只有当最后一次调用返回的函数时，才会执行func。

节流（Throttle）

节流则相反，它确保函数在一定时间内只执行一次。在连续触发事件的情况下，节流函数会限制函数的执行频率。常用于滚动加载，时间戳获取等场景。

以下是一个简单的节流函数的实现：

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

在这个例子中，每次调用返回的函数时，都会检查自上次执行func以来是否已经过了wait指定的时间。如果是，则执行func，否则就跳过。

总的来说，防抖和节流都是用于限制函数执行频率的技术，但是它们的目标和行为有所不同：防抖是防止在短时间内频繁执行，而节流是确保在一定时间内只执行一次。