<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，当用户再点击1次时，<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

我会用button 替换a 标记（因为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;

}

希望它能帮助您解决问题。