防止重复发送 Ajax 请求

防止重复发送 Ajax 请求是一个常见的开发任务，因为在页面交互过程中，用户可能会频繁地发起相同的请求，如果每次都向服务器发起请求，不仅会增加服务器的压力，也会降低用户体验。下面是防止重复发送 Ajax 请求的完整攻略：

1. 使用防抖技术

防抖技术是一种延迟执行函数的策略，即在指定时间内如果触发多次事件，只会执行一次。在 Ajax 请求中，我们可以使用防抖技术来确保在指定时间内只发送一次请求。下面的示例中，假设有一个按钮需要发送 Ajax 请求：

// 防抖函数
function debounce(fn, delay) {
  let timer = null;
  return function() {
    clearTimeout(timer);
    const context = this;
    const args = arguments;
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  };
}

// 绑定点击事件
const btn = document.querySelector('#btn');
btn.addEventListener('click', debounce(function() {
  // 发送 Ajax 请求
  // ...
}, 500));

上述代码中，我们定义了一个防抖函数 debounce，它接受一个函数和一个延迟时间作为参数，返回一个新的函数。当点击按钮时，我们使用 debounce 函数对 Ajax 请求进行防抖处理，即在 500ms 内只发送一次请求。

2. 使用节流技术

节流技术是一种延迟执行函数的策略，区别在于它在指定时间内无论触发多少次事件，都会至少执行一次。在 Ajax 请求中，我们可以使用节流技术来控制发送请求的频率。下面的示例中，假设有一段输入框需发送 Ajax 请求：

// 节流函数
function throttle(fn, delay) {
  let canRun = true;
  return function() {
    if (!canRun) return;
    canRun = false;
    const context = this;
    const args = arguments;
    fn.apply(context, args);
    setTimeout(function() {
      canRun = true;
    }, delay);
  };
}

// 绑定输入事件
const input = document.querySelector('#input');
input.addEventListener('input', throttle(function() {
  // 发送 Ajax 请求
  // ...
}, 500));

上述代码中，我们定义了一个节流函数 throttle，它接受一个函数和一个延迟时间作为参数，返回一个新的函数。当输入框输入内容时，我们使用 throttle 函数对 Ajax 请求进行节流处理，即在 500ms 内只发送一次请求。

综上所述，使用防抖和节流技术都可以防止重复发送 Ajax 请求，但它们的具体应用场景不同，需要根据具体情况进行选择。