防止滥用触发 Ajax 调用的按钮

防止滥用触发 Ajax 调用的按钮的一个解决方法是使用一个标志变量来控制按钮的点击事件。以下是一个代码示例：

HTML：

<button id="ajaxButton">触发 Ajax 调用</button>

JavaScript：

// 标志变量，用于控制按钮点击事件
let ajaxInProgress = false;

// 获取按钮元素
const ajaxButton = document.getElementById('ajaxButton');

// 绑定点击事件处理程序
ajaxButton.addEventListener('click', function() {
  // 检查标志变量，如果有 Ajax 请求正在进行中，则直接返回
  if (ajaxInProgress) {
    return;
  }

  // 设置标志变量为 true，表示有 Ajax 请求正在进行中
  ajaxInProgress = true;

  // 发起 Ajax 请求
  ajaxCall()
    .then(function(response) {
      // 处理 Ajax 响应
      console.log(response);
    })
    .catch(function(error) {
      // 处理 Ajax 错误
      console.error(error);
    })
    .finally(function() {
      // Ajax 请求完成后，重置标志变量为 false
      ajaxInProgress = false;
    });
});

// 模拟 Ajax 请求
function ajaxCall() {
  return new Promise(function(resolve, reject) {
    // 发起 Ajax 请求
    setTimeout(function() {
      // 模拟成功响应
      resolve('Ajax 请求成功');
    }, 2000);
  });
}

在上述代码中，我们使用了一个标志变量 ajaxInProgress 来控制按钮的点击事件。当按钮被点击时，首先检查标志变量的值。如果有 Ajax 请求正在进行中，则直接返回，不执行后续的 Ajax 调用。如果没有 Ajax 请求正在进行中，则设置标志变量为 true，表示有 Ajax 请求正在进行中，然后发起 Ajax 请求。在 Ajax 请求完成后，无论成功还是失败，都会将标志变量重置为 false，以便允许后续的按钮点击事件。