你的程序执行地太快了，不妨试试函数防抖和节流吧！

2023-10-04 21:28:49

你是否曾遇到过这样的情况：在使用搜索框时，只要你输入一个字母，就会触发一次搜索请求。这可能会导致服务器不堪重负，从而导致应用程序崩溃。为了防止这种情况发生，我们可以使用函数防抖和函数节流技术。

什么是函数防抖？

函数防抖是一种技术，它可以防止函数在短时间内多次调用。当一个函数被防抖处理后，它将在一段时间内只调用一次，即使在该段时间内函数被多次调用。

例如，我们有一个搜索框，当用户输入时，我们希望触发搜索请求。但是，我们不想在用户每次输入一个字母时都触发搜索请求，因为这可能会导致服务器不堪重负。我们可以使用函数防抖来防止这种情况发生。

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

const debouncedSearch = debounce(search, 500);

searchInput.addEventListener('input', debouncedSearch);

function search() {
  // Make a search request
}

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

在这个例子中，debounce()函数将search()函数进行了防抖处理，并设置了一个500毫秒的延迟。这意味着，当用户在搜索框中输入时，search()函数将在500毫秒内只调用一次。

什么是函数节流？

函数节流是一种技术，它可以确保函数在一定时间间隔内只调用一次。当一个函数被节流处理后，它将在一定时间间隔内只调用一次，即使在该时间间隔内函数被多次调用。

例如，我们有一个滚动事件监听器，当用户滚动页面时，我们希望触发一个函数。但是，我们不想在用户每次滚动页面时都触发该函数，因为这可能会导致性能问题。我们可以使用函数节流来防止这种情况发生。

const throttledScrollHandler = throttle(scrollHandler, 100);

window.addEventListener('scroll', throttledScrollHandler);

function scrollHandler() {
  // Do something when the user scrolls the page
}

function throttle(func, delay) {
  let lastCall = 0;
  return function () {
    const now = Date.now();
    if (now - lastCall < delay) {
      return;
    }
    lastCall = now;
    func.apply(this, arguments);
  };
}