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>

You will see the numbering is jumping..