什么是节流（throttling）和防抖（debouncing）?

可以使用节流（throttling）或者防抖（debouncing）来控制调用接口的频率。

节流指的是在一段时间内只允许函数执行一次，比如每隔 1 秒钟调用一次接口。可以使用 setTimeout 和 clearTimeout 来实现。

防抖指的是在函数调用后，等待一段时间，如果这段时间内没有再次调用函数，那么函数才会执行。比如用户在输入框中输入时，可以等待用户停止输入后再调用接口。可以使用 setTimeout 和 clearTimeout 来实现。

具体实现可以参考以下示例代码：

节流：

function throttle(func, delay) {
  let isThrottled = false;
  
  return function(...args) {
    if (!isThrottled) {
      func.apply(this, args);
      isThrottled = true;
      
      setTimeout(() => {
        isThrottled = false;
      }, delay);
    }
  };
}

// 示例用法
function handleScroll() {
  console.log('Scroll event throttled');
}

const throttleScroll = throttle(handleScroll, 300);
window.addEventListener('scroll', throttleScroll);

防抖

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

// 示例用法
function handleInput() {
  console.log('Input event debounced');
}

const debounceInput = debounce(handleInput, 300);
document.getElementById('input').addEventListener('input', debounceInput);

以下是一个实际使用节流的例子，假设我们有一个搜索框，用户输入时会自动调用搜索接口：

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

function search(query) {
  // 调用搜索接口，并更新搜索结果
  searchResults.innerHTML = '搜索中...';
  fetch(`/search?q=${query}`)
    .then(response => response.text())
    .then(html => {
      searchResults.innerHTML = html;
    });
}

// 每隔 500 毫秒调用一次搜索函数
searchInput.addEventListener('input', throttle(function() {
  search(searchInput.value);
}, 500));

以下是一个实际使用防抖的例子，假设我们有一个保存按钮，用户点击后会自动保存当前编辑的内容：

const saveButton = document.getElementById('save-button');
const editor = document.getElementById('editor');

function saveContent() {
  // 调用保存接口
  fetch('/save', {
    method: 'POST',
    body: editor.value,
  });
}

// 用户点击后等待 1 秒钟，如果用户在这段时间内再次点击，重新等待 1 秒钟
saveButton.addEventListener('click', debounce(function() {
  saveContent();
}, 1000));

这些例子都是基于 DOM 事件来触发节流和防抖的，实际使用中也可以根据具体的业务需求来调用节流和防抖函数。

选择使用节流（throttling）还是防抖（debouncing）取决于你的具体需求和场景。

1. 使用节流：

• 当你希望在一定时间间隔内稳定地执行函数，无论触发频率有多高。

• 当你需要限制函数的执行频率，以防止过多的资源消耗或性能问题。

• 适用于高频率事件，如滚动、拖拽、鼠标移动等。

2. 使用防抖：

• 当你希望在连续触发动作后的一段时间内只执行最后一次触发的动作。

• 当你需要避免频繁触发动作导致的不必要的资源消耗或多次重复操作。

• 适用于按钮点击、输入框输入、搜索等场景。

综合考虑以下几个因素可以帮助你做出选择：

• 触发频率：观察事件的触发频率，如果触发频率非常高，可能需要使用节流来限制执行频率。

• 实时性：如果你需要实时反馈用户操作，可以使用防抖来快速响应最后一次触发的动作。

• 用户体验：根据用户的交互期望和场景需求，选择最适合的技术以提供最佳的用户体验。

需要注意的是，节流和防抖都是根据特定的时间间隔进行限制，因此根据实际需求和效果进行调整是很重要的。你也可以根据具体情况进行试验和调整，以获得最佳的效果和用户体验。