Question 15262 in Laravel Question posted in
The official Laravel Documentation can be found here.

How can I detect too many and fast ajax submissions in Javascript? – Laravel

I’m making a QR Code generator in Laravel.
I created a "Range" entry to set the QR code size.
I detected this with the "mouseup" feature and started creating ajax posts. (Because if I did it with "input" it would send ajax on every swipe.)
If this is done too quickly, I want to issue a warning and warn the user.
How do I detect?

My Generator Image

this is my code:
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);
            }
          });

I did some research but couldn’t find a solution for this.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks to @Steve for reminding me of the "Timer" thing. This is how I solved my problem:

          $('#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);
    }
  });

    As soon as the input was made using "Boolean" I ran the function and set the "global variable" to "false". I used "setTimeout" to make it "true" after 1 second. I had it checked if "Global Boolean" was correct when re-entered. If 1 second elapses, "boolean" becomes "true" and allows login. If 1 second has not passed, "boolean" becomes "false" and does not allow input. Also, the previous value is re-entered.

    Sorry for my English. Thanks everyone.


  2. 0

    Basically you have two main options:

    • you can do this logic on the server and somehow warn your client-side
    • you can specify a maximum time interval at client-side

    You can also combine the two if you prefer that

    Server-side

    Your server (Laravel) in this case can use rate-limiting on your Laravel server which will protect your server from abuse even if it is not coming from your UI. Your client-side could receive some message upon which you could let your user know that he/she abused the app.

    Client-side

    The problem boils down to managing that an action does not happen too frequently. This is a neat way to do it:

    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()">

    The snippet above is agnostic to request sending, basically it delegates it to a function f and it is focusing on the mechanism that you need. Feel free to replace f with the function you use for sending requests.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search