laravel 我如何检测JavaScript中太多和快速 AJAX 提交?

gtlvzcf8  于 2023-04-13  发布在  Java
关注(0)|答案(2)|浏览(131)

我正在Laravel中制作一个QR码生成器。我创建了一个“Range”条目来设置QR码的大小。我用“mouseup”功能检测到了这一点,并开始创建 AJAX 帖子。(因为如果我用“input”来做,它会在每次滑动时发送ajax。)如果这做得太快,我想发出警告并警告用户。我如何检测?
My Generator Image
这是我的代码:HTML:

<input type="range" class="form-range mt-3" id="qrCodeSize" value="300" min="250" max="1000" />

JS:

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

我做了一些研究,但无法找到解决方案。

kulphzqa

kulphzqa1#

基本上你有两个主要的选择:

  • 您可以在服务器上执行此逻辑并以某种方式警告客户端
  • 您可以在客户端指定最大时间间隔

如果你喜欢的话,你也可以把两者结合起来

服务端

在这种情况下,您的服务器(Laravel)可以在Laravel服务器上使用rate-limiting,这将保护您的服务器免受滥用,即使它不是来自您的UI。您的客户端可能会收到一些消息,您可以让您的用户知道他/她滥用了应用程序。

客户端

这个问题归结为管理一个动作不会发生得太频繁。这是一个很好的方法:

function f() {
    //Do whatever you want, related or unrelated to request sending
}

let fCounter = 0;
let fLimit = 5;
let fTimeLimit = 3000; //3 seconds

function executeF() {
    if (fCounter >= fLimit) {
        alert("Too many f calls");
    } else {
        fCounter++;
        f();
        console.log(`f is ${fCounter}`);
        setTimeout(() => {
            fCounter--;
            console.log(`f is ${fCounter}`);
        }, fTimeLimit);
    }
}
<input type="button" value="click me!" onclick="executeF()">

上面的代码片段对于请求发送是不可知的,基本上它将其委托给函数f,并且它专注于您需要的机制。请随意将f替换为您用于发送请求的函数。

wn9m85ua

wn9m85ua2#

感谢@Steve提醒我“计时器”的事情。这是我解决问题的方法:

$('#qrCodeSize').on('mousedown', function(){
    qrCodePrevSize = $('#qrCodeSize').val();
  });

  $('#qrCodeSize').on('mouseup', function(){
    if(timerBool == true){
      qrCodeGenerate();
      timerBool = false;
      setTimeout(function(){
        timerBool = true;
      }, 1000);
    }
    else{
      alert("slow bro!");
      $('#qrCodeSize').val(qrCodePrevSize);
    }
  });

一旦输入使用“布尔”,我运行函数并设置“全局变量”为“假”。我使用“setTimeout”使其在1秒后为“真”。我检查了“全局布尔”在重新输入时是否正确。如果1秒过去了,“布尔”变为“真”并允许登录。如果1秒没有过去,“boolean”变为“false”并且不允许输入。此外,重新输入先前的值。
抱歉,我的英语不好。谢谢大家。

相关问题