Question

下面是我的html，我在做一个简单的文字游戏，玩家想出售他们的物品。

<input name="gg1" id="gg1" value="10">
<a href="javascript:;" onclick="fastbtn(1);">Sale</a>
<script>
  function fastbtn(sid){
  var aa = jQuery("#gg"+sid).val();
  if(aa > 0){
      aa--;
      jQuery("#gg"+sid).attr("value", aa);
      ajaxget('plugin.php?id=game&do=store&submit=true&timestamp=12345&gg1[1]=1&ggqty[1]=1&formhash={FORMHASH}&fastbuy=true','bbb'); //this is my ajax function -> ajaxget(requesturl,return result to id);
  }
</script>

例如value = 10，但是当用户单击10次（快速单击）时，value转到0，但是我的服务器端仅处理{{1 }}次。

反正点击量是否可以与服务器端匹配？

在我看来，8的第二次点击是否可以等到fastbtn(sid)的{{1}}的第一次点击完成然后才处理？

Answer 1

发生这种情况是因为ajax网络请求将花费一定的时间，并且快速单击将发送许多尚未在服务器上处理的请求，但您正在执行aa--导致差异

有很多方法可以解决这个问题，只需禁用按钮，而ajax处于挂起状态，这会将在任何给定时间点的活动ajax请求限制为1

但是由于您正在使用锚标记，因此无法禁用，但是可以使用标志（isPending）

因此，在加载时，我们将标记初始化为““没有待处理要求您可以继续”。（ false ）
当继续执行ajax时，我们将标志设置为“很抱歉，现在很忙请稍后重试”。（ true ）
ajax完成后，我们再次将标志重置为 false

因此，每次用户单击时，我们都会首先检查“是否清除”，如果没有，我们将不做任何事情就从fastbtn()返回

假设您使用的是针对ajax的jQuery get（）函数，则可以按照以下步骤操作

<script>
    var isPending = false
    function fastbtn(sid, t){
        if(isPending)
        return;

        var aa = jQuery("#gg"+sid).val();
        if(aa > 0){
            aa--;
            jQuery("#gg"+sid).attr("value", aa);

            ajaxget('plugin.php?id=game&do=store&submit=true&timestamp=12345&gg1[1]=1&ggqty[1]=1&formhash={FORMHASH}&fastbuy=true','bbb'); //this is my ajax function -> ajaxget(requesturl,return result to id);
        }

        //...
        //..
        //.
    }

    function ajaxget(url){
        isPending = true;
        $.get(url, function(data, status){
           // <--only fires on success
        })
        .done(function() { // <--only fires on success

        })
        .fail(function() {  // <-- only fires on error

        })
        .always(function() {  // <-- this always fires
            isPending = false; 
        }); 
    }
</script>

另一种方法是将aa--放在ajax的成功回调或done()中，这样aa的值将仅在服务器记录了更改并发送后才更改这是确认

Javascript如何等待点击功能完成，然后在用户再次点击后才重复相同的功能？

1 个答案: