JavaScript实现防抖和节流

防抖

定义：单位时间内，频繁触发事件，只执行最后一次

封装防抖函数

思路

当触发一个事件时，防抖函数会启动一个定时器，延迟一段时间处理函数，如果在这段时间内又触发了同样的事件，就会清楚之前的定时器，并重新设置一个新的定时器。只有在最后一个事件触发后，经过一段时间内没有新的事件再次触发时，事件处理函数才会被执行

代码实现

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

// 使用：假设有一个输入框，当用户输入时需要触发一个搜索函数，但为了避免频繁触发，可以使用防抖函数来优化
const searchInput = document.getElementById("searchInput");

function search() {
  console.log("搜索内容：", searchInput.value);
}

const debouncedSearch = debounce(search, 300);

searchInput.addEventListener("input", debouncedSearch);

解释

debounce函数
- 接收两个参数：func是需要防抖的函数，wait是延迟时间（单位毫秒）
- 使用闭包保存了一个timeout变量，用于存储setTimeout的返回值
- 返回一个新的函数，这个新函数会在每次调用时清除之前的定时器，并重新设置一个新的定时器
setTimeout
- 通过setTimeout实现延迟调用，只有在延迟时间结束后才会执行目标函数
clearTimeout
- 在每次调用新函数时，先清除之前的定时器，防止多个定时器同时存在
applay
- 使用 apply 方法确保目标函数的上下文（this）和传入的参数正确

节流

定义：确保函数在一定时间间隔内最多执行一次，无论事件触发频率如何

封装节流函数

思路

当触发一个事件时，节流函数会立即执行该事件处理函数，然后在设定的时间间隔内，如果再次触发相同的事件，节流函数会忽略该事件，直到这段时间间隔过去，才会重新触发执行

代码实现

function throttle(func, limit) {
  let inThrottle;
  return function () {
    const args = arguments;
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => {
        inThrottle = false;
      }, limit);
    }
  };
}

// 假设有一个页面滚动事件，需要在用户滚动页面时触发某个函数，但为了避免频繁触发，可以使用节流函数来优化
window.addEventListener("scroll", throttle(() => {
  console.log("页面滚动了");
}, 1000));

解释

throttle函数
- 接收两个参数：func 是需要节流的函数，limit 是时间间隔（单位为毫秒）
- 使用闭包保存一个变量 inThrottle，用于标记是否处于节流状态
inThrottle
- 当函数被调用时，检查 inThrottle 是否为 true。如果是 true，则表示当前处于节流状态，直接返回，不执行函数
- 如果是 false，则执行函数，并将 inThrottle 设置为 true，表示进入节流状态
setTimeout
- 使用 setTimeout在指定的时间间隔 limit后将 inThrottle设置为 false，表示节流状态结束
apply
- 使用 apply方法确保目标函数的上下文（this）和传入的参数正确

JavaScript实现防抖和节流