Preventing multiple requests from ajax

Question

I have "load more" button, and if I click it fast enough it load the same content twice, and I want to prevent it.

This is how I call to the load more with ajax:

<script type="text/javascript">
  function loadmore() {
    var val = document.getElementById("result_no").value;
    var userval = document.getElementById("user_id").value;
    $.ajax({
      type: 'post',
      url: 'fetch.php',
      data: {
        getresult: val,
        getuserid: userval
      },
      context: this,
      success: function(response) {
        var content = document.getElementById("result_para");
        content.innerHTML = content.innerHTML + response;

        document.getElementById("result_no").value = Number(val) + 10;
      }
    });
  }

</script>

<div id="content">
  <div id="result_para">


  </div>
</div>

<input type="hidden" id="user_id" value="<?php echo $userid;?>">
<input type="hidden" id="result_no" value="15">
<input type="button" id="load" onclick="loadmore()" value="Load More Results">

jlowcs · Accepted Answer · 2016-04-10T19:01:42.793

You could set a loading variable to true at the start of loadmore, and set it back to false in the ajax callback. loading should be declared outside of loadmore though (see what a closure is).

            var loading = false;
            function loadmore()
            {
              if (loading) {
                return ;
              }
              loading = true;
              var val = document.getElementById("result_no").value;
              var userval = document.getElementById("user_id").value;
              $.ajax({
              type: 'post',
              url: 'fetch.php',
              data: {
                getresult:val,
                getuserid:userval
              },
              context: this,
              success: function (response) {
                loading = false;
                var content = document.getElementById("result_para");
                content.innerHTML = content.innerHTML+response;

                document.getElementById("result_no").value = Number(val)+10;
              },
              error: function () {
                loading = false;
              }
              });
            }

Instead of using that variable, you could also programmatically disable/enable the button, but that means that your button will flicker if the request is fast.

score 1 · Answer 2 · answered Apr 10 '16 at 18:49

1

You can prevent from this by disable the button after first click, so change this lines:

         success: function (response) {
            var content = document.getElementById("result_para");
            content.innerHTML = content.innerHTML+response;

            document.getElementById("result_no").value = Number(val)+10;
          }

With this lines:

             success: function (response) {
document.getElementById("load").disabled = true;
                var content = document.getElementById("result_para");
                content.innerHTML = content.innerHTML+response;

                document.getElementById("result_no").value = Number(val)+10;
document.getElementById("load").disabled = false;
              }

answered Apr 10 '16 at 18:49

mertizci

538
3
12

That's a little dangerous unless you also set disabled = false on the error case as well. Otherwise, if there's an error on the ajax call, the button will remain disabled forever. – RJM Apr 10 '16 at 18:51
@RJM But its inside of success tag. So if there is an error, it will not go inside of success. – mertizci Apr 10 '16 at 18:53
You should disable the button at the beginning of the loadmore function, not at the beginning of the success function. Else, what's the point? – jlowcs Apr 10 '16 at 18:53
@jlowcs nope its not good. as RJM mentioned above, if there's an error on the ajax call, the button will remain disabled forever. So you have to put disabled, inside of success. – mertizci Apr 10 '16 at 18:56
@jlowcs The point is, when you disabled the load button, it will wait till its receive answer from server. Then it will enable it again. – mertizci Apr 10 '16 at 18:57
The success function is called when the request's response has been received. So, if I click multiple times on the button before the response has been received, the button being still enabled, multiple requests will be sent. – jlowcs Apr 10 '16 at 18:59

score -1 · Answer 3 · answered Apr 10 '16 at 19:09

-1

you could disable the button when the "load more" button is clicked then then use the javascript function setTimeout to remove the disabled attribute from the button after a period of time. This would mean that the button would not be able to be clicked after the first click and even if the ajax request returned an error the button would still be able to be clicked.

$('#load').click(function {
    // disable the button
    $(this).prop('disabled', true);

    // after three seconds enable the button again
    var timeout = setTimeout(function() { $(this).prop('disabled', false); }, 3000);

});

answered Apr 10 '16 at 19:09

Nick

103
1
8

I don't like to make assumptions about the time that would take a request. What if the network is slow, and it takes more than 3 seconds? – jlowcs Apr 10 '16 at 19:15
Also, `$(this)` wouldn't work inside your timeout callback. – jlowcs Apr 10 '16 at 19:15
apologies if I misunderstood, i thought you were just wanting to stop fast double clicks so it wouldn't matter it the request took longer than the time it took the request to be processed. – Nick Apr 10 '16 at 19:19

Preventing multiple requests from ajax

3 Answers3