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

编辑 在“嘟嘟”两声输入后更新答案。