javascript – JQuery阻止链接在ajax加载时工作

我有一个firework爆炸系统,它使用JQuery通过AJAX连接到PHP脚本来引爆烟花.唯一的问题是如果你一个接一个地点击一个启动按钮,就有可能引发比你想要的更多的烟火.

我需要一种方法来禁用页面上的所有其他链接,直到ajax完成并收到响应.我试过了：

//Prevent clicks
$("body").find("a").click(function (e) { e.preventDefault(); });
//Re-enable clickable links
$("body").find("a").unbind("click");

我目前的ajax脚本是：

$(document).ready(function() {
$(".button").on("click",function() {
    //disable all other links
    $.ajax({
        type: "POST",
        url: "launch.PHP",
        data: {FID:$(this).attr('id'),Length:$('#FireLength').val()},
        success: function(e) {
            //Re-enable other links once ajax is complete
        }
    });
    return false;
});
});

更好的是,如果按钮在等待响应时变灰.我在http://joshblease.co.uk/firework/有一个演示脚本

解决方法:

使用变量禁用的一种方法

$(document).ready(function() {
var disabled = false;
$('a').css('opacity','0.4');
$(".button").on("click",function() {
    //disable all other links
    disabled = true;
    $.ajax({
        type: "POST",
        url: "launch.PHP",
        data: {FID:$(this).attr('id'),Length:$('#FireLength').val()},
        success: function(e) {
            //Re-enable other links once ajax is complete
            disabled = false;
            $('a').css('opacity','1');
        }
    });
    return false;
});
});

$('a').click(function(event){
    if(disabled)
        event.preventDefault();
});

更新

更改了禁用效果的链接不透明度.