What is the best way for JavaScript to wait for a click function to finish before repeating the same function when the user clicks again

Question

What is the best way for JavaScript to wait for a click function to finish before repeating the same function when the user clicks again

I have created a simple text-based game using HTML where the player wants to sell their item.

<input name="gg1" id="gg1" value="10">
<a href="javascript:;" onclick="fastbtn(1);">Sale</a>
<script>
  function fastbtn(sid){
  var aa = jQuery("#gg"+sid).val();
  if(aa > 0){
      aa--;
      jQuery("#gg"+sid).attr("value", aa);
      ajaxget('plugin.php?id=game&do=store&submit=true&timestamp=12345&gg1[1]=1&ggqty[1]=1&formhash={FORMHASH}&fastbuy=true','bbb'); //this is my ajax function -> ajaxget(requesturl,return result to id);
  }
</script>

For example, the value = 10, but when the user clicks 10 times quickly (fast clicking), the value turns to 0, but my server-side only processes 8 times.

Is there any way to match the quantity of clicks with the server side?

In my thinking, is it possible for the second click of fastbtn(sid) to wait until the first click of fastbtn(sid)'s ajaxget is completed before processing?

javascript ajax

Answer 1

Answer №1

The reason for this issue is when a rapid clicking occurs, multiple ajax network requests are sent before the server has had time to process them, leading to disparities in the response.

To solve this problem, one simple solution is to disable the button while the ajax request is pending. This will ensure that only one active ajax request can be made at any given time.

If you're using an anchor tag where disabling is not possible, you can use a flag like isPending.

Initially, set the flag to false to indicate no pending requests.
When initiating an ajax request, set the flag to true to show that it is busy handling a request.
After the ajax request is completed, reset the flag back to false.

Before processing each click event, check if the flag is set to prevent multiple simultaneous requests.

In case you're using jQuery's get() function for ajax, follow the provided code snippet:

<script>
    var isPending = false;
    function fastbtn(sid, t) {
        if (isPending)
            return;

        var aa = jQuery("#gg"+sid).val();
        if(aa > 0){
            aa--;
            jQuery("#gg"+sid).attr("value", aa);

            ajaxget('plugin.php?id=game&do=store&submit=true&timestamp=12345&gg1[1]=1&ggqty[1]=1&formhash={FORMHASH}&fastbuy=true','bbb');
        }

        //...
        //..
        //.
    }

    function ajaxget(url) {
        isPending = true;
        $.get(url, function(data, status) {
           // <--only fires on success
        })
        .done(function() { // <--only fires on success

        })
        .fail(function() {  // <-- only fires on error

        })
        .always(function() {  // <-- this always fires
            isPending = false; 
        }); 
    }
</script>

Another approach could be to handle the decrement (aa--) inside the ajax success callback or in the done() function so that the value of aa changes only after the server has confirmed and recorded the change.

Answer 2

The reason for this issue is when a rapid clicking occurs, multiple ajax network requests are sent before the server has had time to process them, leading to disparities in the response.

To solve this problem, one simple solution is to disable the button while the ajax request is pending. This will ensure that only one active ajax request can be made at any given time.

If you're using an anchor tag where disabling is not possible, you can use a flag like isPending.

Initially, set the flag to false to indicate no pending requests.
When initiating an ajax request, set the flag to true to show that it is busy handling a request.
After the ajax request is completed, reset the flag back to false.

Before processing each click event, check if the flag is set to prevent multiple simultaneous requests.

In case you're using jQuery's get() function for ajax, follow the provided code snippet:

<script>
    var isPending = false;
    function fastbtn(sid, t) {
        if (isPending)
            return;

        var aa = jQuery("#gg"+sid).val();
        if(aa > 0){
            aa--;
            jQuery("#gg"+sid).attr("value", aa);

            ajaxget('plugin.php?id=game&do=store&submit=true&timestamp=12345&gg1[1]=1&ggqty[1]=1&formhash={FORMHASH}&fastbuy=true','bbb');
        }

        //...
        //..
        //.
    }

    function ajaxget(url) {
        isPending = true;
        $.get(url, function(data, status) {
           // <--only fires on success
        })
        .done(function() { // <--only fires on success

        })
        .fail(function() {  // <-- only fires on error

        })
        .always(function() {  // <-- this always fires
            isPending = false; 
        }); 
    }
</script>

Another approach could be to handle the decrement (aa--) inside the ajax success callback or in the done() function so that the value of aa changes only after the server has confirmed and recorded the change.

What is the best way for JavaScript to wait for a click function to finish before repeating the same function when the user clicks again

Answer №1

Similar questions

What is the best approach for testing a function containing document.querySelector() with unit tests?

Performing a JQuery Ajax request to post data and maintain current page displayed

Is there a way to direct URLs with varying "levels" in Express?

What is the procedure for matching paths containing /lang using the express middleware?

Is there a way to convert the value from a radio input into a boolean and save it?

Concealing tables or forms using Javascript

JavaScript recursive function to find the sum of array elements that equals to the given target number n

Calculate the total amount by multiplying the price and quantity values within nested arrays

Ways to dynamically assign value to a checkbox using jquery

Creating a new nested object in JavaScript using the keys of the current object

Output the JSON string retrieved from a specified URL

Is there a way to obtain cookies on a Server-side component in the latest version of Next.js?

Exploring the process of mapping an array with unidentified object properties

What exactly is Bootstrap - a CSS framework, a JavaScript framework, or a combination

Transferring JavaScript variables to PHP

Locate the position of a substring within a Uint8Array

Group by month and calculate the total sum using mongoose in MongoDB

The 1and1 Server is experiencing a 500 internal error when using Ajax and jQuery .Load() functions, but accessing the URL directly seems to

The property 'licenses' has incompatible types. The type 'License[]' cannot be assigned to type 'undefined' in the getServerSideProps function while using iron-session

Tips for displaying an error message when entering an incorrect password using Firebase Simple Login email-password authentication