После <a>onclick, дождитесь завершения функции, а затем снова щелкните / обработать

Question

Я использую jQuery.get, чтобы выполнить запрос AJAX. Когда пользователь нажимает <a>, я отправляю запрос на сервер через jQuery.get, а затем обновляю <div id='aaa'>ajax call back here</a>;

Однако, когда пользователь нажимает <a> очень быстро, возвращать данные медленнее, чем при нажатии, и <div id ='aaa'></a> не соответствует тому, что хранится в базе данных.

Например, <div id='aaa'>10</div>, -1, когда пользователь щелкает 1 раз. Пользователь нажимает 5 раз, и #aaa должно быть <div id='aaa'>5</div>, но поскольку пользователь нажимал очень быстро, div показывает <div id='aaa'>8</div>. База данных сервера была обновлена ​​до 5, и когда пользователь щелкнет еще раз, <div id='aaa'>8</div> будет преобразован в <div id='aaa'>4</a>, потому что на стороне сервера 5.

Я знаю, что это касается AJAX сетевой запрос займет какое-то конечное время.

Итак, возможно ли, что моя функция подождет, пока jQuery.get не будет выполнено и завершится, а затем сможет только щелкнуть / обработать снова. Я попробовал кодировку ниже, но все равно проблема с вышеупомянутым.

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>

Вы увидите, что нумерация прыгает. .

Answer 1

Я бы заменил тег a на button (поскольку целью тегов a является навигация) и оставил бы его отключенным при нажатии, если сервер не отправит ответ.

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

После получения ответа, то есть в случае успеха или неудачи, снова нажмите кнопку.

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)
    });
}

ИЗМЕНИТЬ Обновление ответа после двойного звукового сигнала входы.

Answer 2

Вы можете использовать setTimeout. Итак,

<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;

}

Надеюсь, это поможет решить вашу проблему.