jQuery 点击进行多次 AJAX 调用

Question

我有多个 jQuery 脚本一起工作。一个将点击动作绑定到元素，另一个处理特定的功能。

虽然尝试以不同的方式停止多个呼叫，但我仍然可以通过快速单击来关闭两个呼叫。

成功调用重新绑定动作后，每次返回时调用次数也可能翻倍，但这似乎是首先能够调用它两次的结果。

有什么建议可以确保 takeAction 只能调用一次吗？

这是我的代码片段：

点击活页夹：

var actions = 
{
    pressed: false,
    bind: function()
    {
        $(".battleAction").off('click').one('click', function(event) {
            if (actions.pressed) return;
            actions.pressed = true;
            $(".battleAction").off('click');
            var idoption = $(this).attr('data-battle-option');
            battle.takeAction({    idoption: idoption   });
        });
    }
}

战斗功能：

var battle =
{
    takeAction: function( action )
    {
        battle.a = {
            idoption: null
        };

        $.extend( battle.a, action );

        $.ajax({
            url: "url/to/post",
            type: "post",
            data: { option: battle.a.idoption },
            dataType: "json",
            success: function(data) {
                actions.bind();
            }
        });
    }
}

以及获取点击事件的HTML按钮：

<button type="button" class="btn btn-default battleAction" data-battle-option="1">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>action 1</button>

<button type="button" class="btn btn-default battleAction" data-battle-option="2">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>action 2</button>

<button type="button" class="btn btn-default battleAction" data-battle-option="3">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>action 3</button>

问题似乎出在 AJAX 调用后重新分配点击。在这么短的时间内，我可以发起两次通话。

Answer 1

看来您可能想将 .off 移动到处理程序中的第一件事，这样即使您 return true:

也总是得到 "off"

$(".battleAction").off('click').one('click', function(event) {
   $(".battleAction").off('click');
   if (actions.pressed) return;
   actions.pressed = true;
   var idoption = $(this).attr('data-battle-option');
   battle.takeAction({
     idoption: idoption
   });
 });

Answer 2

您可以在点击后禁用该按钮并在 AJAX 调用后重新启用它：

点击活页夹：

$(".battleAction").on('click', function(event) {
  $(this).prop("disabled", true);
  var idoption = $(this).attr('data-battle-option');
  battle.takeAction({    idoption: idoption   });
});

战斗功能：

var battle =
{
    takeAction: function( action )
    {
        battle.a = {
            idoption: null
        };

        $.extend( battle.a, action );

        $.ajax({
            url: "url/to/post",
            type: "post",
            data: { option: battle.a.idoption },
            dataType: "json",
            success: function(data) {
                $(".battleAction").prop("disabled", false);
            }
        });
    }
}

jQuery 点击进行多次 AJAX 调用

jQuery click makes multiple AJAX calls

javascript

ajax

jquery

event-handling

jquery-events