防抖和节流

防抖和节流是一种常见的 JavaScript 函数优化技术。以下是它们的示例代码：

防抖

防抖是指在触发事件后，等待一段时间再执行回调函数。如果在这段时间内再次触发了相同的事件，则重新开始计时。

javascript复制代码
function debounce(fn, delay) {
  let timerId;
  
  return function() {
    const args = arguments;
    const context = this;
    
    clearTimeout(timerId);
    
    timerId = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  };
}

// 使用防抖优化 input 搜索框实时查询
const searchInput = document.getElementById('search-input');
const searchResultContainer = document.getElementById('search-results');

function search(query) {
  // 发送 Ajax 请求获取搜索结果，并更新 UI
}

searchInput.addEventListener('input', debounce(function() {
  const query = searchInput.value;
  search(query);
}, 500));

在这个示例中，我们定义了一个 debounce 函数，它接受一个回调函数和一个延迟时间（以毫秒为单位）。当该函数被调用时，它会清除先前的计时器并创建一个新的计时器。如果在延迟时间内再次调用该函数，则会重置计时器。只有在延迟时间结束后才会执行回调函数。

我们还使用防抖优化了一个 input 搜索框实时查询。每当用户输入时，会调用 search 函数进行 Ajax 请求，并将查询结果更新到 UI 中。但是，如果用户连续输入，就会导致大量的 Ajax 请求和 UI 更新，这可能会占用过多资源并降低性能。通过使用 debounce 函数，我们可以在用户停止输入一段时间后才执行查询，从而减少 Ajax 请求和 UI 更新。

节流

与防抖不同，节流是指在一定时间内最多执行一次回调函数，而不管事件触发了多少次。

javascript复制代码
function throttle(fn, delay) {
  let lastTime = 0;
  
  return function() {
    const args = arguments;
    const context = this;
    const now = Date.now();
    
    if (now - lastTime >= delay) {
      fn.apply(context, args);
      lastTime = now;
    }
  };
}

// 使用节流优化页面滚动事件处理
window.addEventListener('scroll', throttle(function() {
  // 处理滚动事件
}, 100));

在这个示例中，我们定义了一个 throttle 函数，它接受一个回调函数和一个延迟时间（以毫秒为单位）。当该函数被调用时，它会记录最后一次执行回调函数的时间。每次调用该函数时，它都会检查当前时间是否距离上次执行回调函数已经超过了延迟时间。如果是，则执行回调函数并更新最后执行时间；否则，不执行回调函数。

我们还使用节流优化了页面滚动事件处理。由于页面滚动事件可能会频繁触发，因此使用节流可以减少处理事件的次数，从而提高性能。