JS防抖与限流

防抖与限流

如果你是一个有经验的前端开发者，那么你一定会经常遇到一些需要处理用户输入的场景，比如搜索框、下拉框、滚动加载等等。

但是，这些场景都存在一个共同的问题：用户的输入或者滚动事件可能会触发多次，给页面带来不必要的性能负担和用户体验问题。

为了解决这个问题，我们可以使用防抖和限流的技术手段来优化页面性能和用户体验。

防抖

防抖是指在一定时间内，如果事件被触发多次，那么只会执行一次。通常情况下，我们会在用户输入框输入内容时使用防抖来避免多次触发搜索请求。

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

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

上面的代码中，我们传入需要防抖的函数和防抖时间间隔，然后返回一个新的函数。这个新函数内部使用了 setTimeout 来实现防抖。

我们可以使用这个防抖函数来优化搜索框的输入事件：

const searchInput = document.querySelector('#search-input');

function search() {
  console.log('searching...');
}

searchInput.addEventListener('input', debounce(search, 500));

上面的代码中，我们在 searchInput 元素上绑定了一个 input 事件，并使用 debounce 函数来包装了 search 函数。这样，当用户输入内容时，只有在 500ms 内没有再次输入时，搜索请求才会真正发出。

限流

限流是指在一定时间内，如果事件被触发多次，那么只会按照一定的频率执行。通常情况下，我们会在滚动加载等场景中使用限流来避免多次触发请求。

下面是一个简单的限流函数实现：

function throttle(func, delay) {
  let timer = null;
  let lastTime = 0;
  return function() {
    const now = new Date().getTime();
    if (now - lastTime >= delay) {
      func.apply(this, arguments);
      lastTime = now;
    } else {
      clearTimeout(timer);
      timer = setTimeout(() => {
        func.apply(this, arguments);
      }, delay - (now - lastTime));
    }
  };
}

上面的代码中，我们传入需要限流的函数和限流时间间隔，然后返回一个新的函数。这个新函数内部使用了 setTimeout 和 clearTimeout 来实现限流。

我们可以使用这个限流函数来优化滚动加载事件：

function loadMore() {
  console.log('loading...');
}

window.addEventListener('scroll', throttle(loadMore, 500));

上面的代码中，我们在 window 元素上绑定了一个 scroll 事件，并使用 throttle 函数来包装了 loadMore 函数。这样，当用户滚动页面时，只会按照一定的频率触发加载事件，避免多次触发请求。