After <a> onclick, wait the function to be completed and then click/process again

user_4624211 0
Viewed 291

I'm using jQuery.get to do an AJAX request. When the user clicks on the <a>, I am sending a request to server via jQuery.get, and then update the <div id='aaa'>ajax call back here</a>;

However, when the user clicks on <a> very fast, the return data slower then clicking, and <div id ='aaa'></a> does not match with what is stored in the database.

For example <div id='aaa'>10</div>, -1 when user click 1 time. User clicks 5 times, and #aaa is supposed to be <div id='aaa'>5</div>, but since the user clicked very fast, the div shows <div id='aaa'>8</div>. Server database has been update to 5 and when the user clicks 1 more time, the <div id='aaa'>8</div> will be turned to <div id='aaa'>4</a> because the server side is 5.

I know this is about AJAX network request will take some finite time.

So, is it possible my function wait until the jQuery.get done and complete, then only able to click/process again. I have try the below coding, but still same problem with above mention.

var isPending = false

function fastbtn(sid, t) {
  if (isPending)
    return;
  goodget('', 'plugin.php?id=ttt&do=realland&ac=' + sid + '&click=true');
}

function goodget(url, rid) {
  isPending = true;
  jQuery.get(url, function(data, status) {
      ajaxget(rid); //this ajaxget is my program core template language, ajaxget(url,WaitId), return as XML format;
    })
    .done(function() { // <--only fires on success
      //alert('ok2');
    })
    .fail(function() { // <-- only fires on error

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

<a href="javascript:;" onclick="fastbtn('watering')">some div ...</a>

enter image description here

You will see the numbering is jumping..

html jquery ajax javascript
2 Answers

I'd replace a tag with button (since the purpose of a tags are navigation) and keep it disabled on click unless the server sends the response. 

<button onclick="fastbtn('watering')">some div ...</button>

After the response is received, i.e, either success of failure, enable the button again.

var isPending = false

function fastbtn(sid, t) {
  if (isPending)
    return;
  goodget('', 'plugin.php?id=ttt&do=realland&ac=' + sid + '&click=true');
}

function goodget(url, rid) {
  isPending = true;
  $('button').attr("disabled", true)
  jQuery.get(url, function(data, status) {
      ajaxget(rid); //this ajaxget is my program core template language, ajaxget(url,WaitId), return as XML format;
    })
    .done(function() { // <--only fires on success

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

    })
    .always(function() { // <-- this always fires
      isPending = false;
     $('button').attr("disabled", false)
    });
}

EDIT Updating the answer after double-beep's inputs.

user_46509750

You may use setTimeout. So

<a href="javascript:void(0);" onclick="fastbtn('watering');">some div ...</a>

var isPendingTimeout = null;
function fastbtn(sid, t) {
  goodget('', 'plugin.php?id=ttt&do=realland&ac=' + sid + '&click=true');

  isPendingTimeout = setTimeout(function(){
    if (isPending == true) {
       clearTimeout(isPendingTimeout);

       ---- do what you want ------
    } 
  }, 25);

  return false;

}

Hope it helps to solve your problem.

user_18972560
Related