我有多个jQuery脚本一起工作。一个将click操作绑定到元素,另一个处理特定的函数。
虽然尝试以不同的方式停止多个呼叫,但我仍然可以通过快速点击来启动两个呼叫。
成功通话重新启动后,每次回来时也可以将通话次数加倍,但这似乎是首先能够召唤两次的结果。
任何确保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调用之后重新分配点击。在那么短的时间内,我可以发起两个电话。
答案 0 :(得分:1)
您可以在单击后禁用该按钮,并在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);
}
});
}
}
答案 1 :(得分:0)
您似乎可能希望将.off
移动到处理程序中的第一个内容,这样即使您返回true,它也总是“关闭”:
$(".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
});
});