如何在JavaScript中检测过于频繁的Ajax提交？Laravel二维码场景

实现思路 #

• 记录每次提交的时间戳，通过判断两次提交的时间间隔来检测是否过于频繁
• 当间隔小于设定阈值时，显示警告并终止请求；否则正常执行二维码生成逻辑

修改后的代码 #

HTML部分（添加警告提示元素） #

<input type="range" class="form-range mt-3" id="qrCodeSize" value="300" min="250" max="1000" />
<!-- 警告提示元素 -->
<div id="warning" style="color: #dc3545; margin-top: 8px; display: none;"></div>

JavaScript部分（添加时间检测逻辑） #

// 记录上次提交的时间戳，初始值为0
let lastSubmitTime = 0;
// 设定最小提交间隔（毫秒），可根据需求调整
const MIN_SUBMIT_INTERVAL = 1000;

$('#qrCodeSize').on('mouseup', function(){
  qrCodeGenerate();
});

function qrCodeGenerate(){
  const currentTime = Date.now();
  const timeInterval = currentTime - lastSubmitTime;

  // 检测是否过于频繁提交
  if (timeInterval < MIN_SUBMIT_INTERVAL) {
    $('#warning').text('请不要频繁调整二维码尺寸！').show();
    // 3秒后自动隐藏警告
    setTimeout(() => $('#warning').hide(), 3000);
    return; // 终止函数，不发送请求
  }

  // 更新上次提交时间
  lastSubmitTime = currentTime;
  // 隐藏之前的警告
  $('#warning').hide();

  let qrCodeSize = $('#qrCodeSize').val();
  $.post("{{ route('qrkoduretajax') }}", {
        "_token": "{{ csrf_token() }}",
        qrCodeSize: qrCodeSize,
      },
      function(result){
        if(result){
          $('#qrCodeIMG').attr("src", result.qr);
        }
      });
}

代码说明 #

1. 时间戳检测：使用Date.now()获取当前时间戳，与上次提交时间戳计算间隔，判断是否小于设定的最小间隔
2. 警告提示：当检测到频繁提交时，显示警告文本，并通过setTimeout自动隐藏
3. 请求控制：频繁提交时直接终止函数，避免发送多余的Ajax请求，减轻服务器压力

内容的提问来源于stack exchange，提问作者Çağdaş