<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

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

}

希望它有助于解决您的问题。