函数防抖

// 函数防抖是一种在多次连续触发事件后只执行一次回调函数的技术。它通常使用在那些需要做性能优化或减少网络请求的场合。函数防抖的实现方法是设置一个定时器，在指定时间间隔内多次触发事件时，如果该时间间隔内有新的事件触发，则清除之前的定时器并重新设置新的定时器，等待时间间隔结束后再执行回调函数。如果在时间间隔内没有新的事件触发，则执行回调函数。下面是一个使用函数防抖的示例，每次输入框输入时都会触发一个 AJAX 请求，但是我们不希望每次输入时都发送请求，而是希望用户停止输入一段时间后再发送请求，以减少网络请求量和提高性能：
function debounce(callback, delay) {
  let timerId = null;
  return function() {
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      callback.apply(this, arguments);
    }, delay);
  }
}
function fetchData() {
  // 发送 AJAX 请求
}
const inputElement = document.getElementById('input');
inputElement.addEventListener('input', debounce(fetchData, 500));

//在这个示例中，我们首先获取输入框的引用，然后定义了一个  `debounce()`  函数来创建一个防抖函数。该防抖函数将在指定的时间间隔内多次触发回调函数，但只会在时间间隔结束后执行一次回调函数。然后，我们定义了一个名为  `fetchData()`  的函数来发送 AJAX 请求。注意，这个函数将在防抖函数中作为回调函数传递，因此它不应该直接在  `input`  事件监听器中调用。最后，我们调用  `addEventListener()`  方法来添加一个  `input`  事件监听器。在这里，我们将使用  `debounce()`  函数来创建一个新的回调函数，该回调函数将在  `input`  事件上触发，并在 500 毫秒的时间间隔内多次执行。每当回调被执行时，防抖函数会清除当前的定时器并重新设置一个新的定时器，等待时间间隔结束后再执行  `fetchData()`  函数。这样，当用户连续输入时，防抖函数会多次调用，但是只有在用户停止输入一段时间后才会发送 AJAX 请求，以减少网络请求量和提高性能。

函数节流

//函数节流（Throttling）是一种优化方式，有助于减少 Web 应用的资源占用率。函数节流可以确保每 X 毫秒只执行一次函数。在 JavaScript 中，可以使用 timestamp 和计时器等技术来实现函数节流。
function throttle(callback, delay) {
  let lastCall = 0;
  return function() {
    const now = new Date().getTime();
    if (now - lastCall < delay) {
      return;
    }
    lastCall = now;
    callback.apply(this, arguments);
  }
}
 const headerElement = document.getElementById('header');
window.addEventListener('scroll', throttle(function() {
  if (window.scrollY > 100) {
    headerElement.style.display = 'none';
  } else {
    headerElement.style.display = 'block';
  }
}, 250));

//在这个示例中，我们首先定义了一个  `throttle()`  函数来创建一个节流函数。该节流函数将在指定的时间间隔内最多调用一次传入的回调函数。然后，我们获取网页头部元素的引用，然后调用  `addEventListener()`  方法来添加滚动事件的监听器。在这里，我们将使用  `throttle()`  函数来创建一个新的回调函数，该回调函数将在  `scroll`  事件上触发，并在指定的延迟时间间隔内最多触发一次。每次回调被触发时，我们检查纵向滚动距离是否超过 100 像素。如果是，我们将  `headerElement`  的样式`display`  属性设置为  `'none'` ，这样它就会消失。否则，我们将其  `display`  属性设置为  `'block'` ，使其重新出现。请注意，这里使用的时间间隔为 250 毫秒，您可以根据需要自行调整。
Last Updated:
Contributors: pengrengui