javascript - 在这种情况下如何阻止 jQuery 函数多次执行？

Question

我正在使用带有 .load 函数的 jQuery 来更新计数，但是如果按钮点击得太快，它可能会被黑客攻击。另外，我无法使用取消绑定(bind)，因为这会使按钮在第一次单击后无法使用。

这是我在单击按钮时使用的 jQuery。

<script type="text/javascript">
$(function() {

    // update "likes" of a post
    $(".bubble-like a").click(function() {
        var post_id = $(this).parent().parent().parent().attr('id');
        var number = post_id.replace(/[^0-9]/g, '');
        $(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
        $(this).parent().parent().children('.bubble-like').fadeOut(200);
        $("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/add_post_like.php?post_id=' + number);
    });

    // remove my like from a post
    $(".bubble-unlike a").click(function() {
        var post_id = $(this).parent().parent().parent().attr('id');
        var number = post_id.replace(/[^0-9]/g, '');
        $(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
        $(this).parent().parent().children('.bubble-liked').fadeOut(200);
        $(this).parent().parent().children('.bubble-unlike').fadeOut(200);
        $("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/remove_post_like.php?post_id=' + number);
    });

});
</script>

如果我点击的速度太快，反之亦然，则加载会执行多次。我还解释说解除绑定(bind)没有帮助。

有什么想法吗？

更新

我不确定我这样做是否正确，但在我的情况下似乎解决了这个问题..有人可以纠正/让我错吗？

我将此行添加到我的点击处理程序中

// update "likes" of a post
$(".bubble-like a").click(function() {
    $(this).css({'display' : 'none'});
    var post_id = $(this).parent().parent().parent().attr('id');
    var number = post_id.replace(/[^0-9]/g, '');
    $(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
    $(this).parent().parent().children('.bubble-like').fadeOut(200);
    $("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/add_post_like.php?post_id=' + number);
});

// remove my like from a post
$(".bubble-unlike a").click(function() {
    $(this).css({'display' : 'none'});
    var post_id = $(this).parent().parent().parent().attr('id');
    var number = post_id.replace(/[^0-9]/g, '');
    $(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
    $(this).parent().parent().children('.bubble-liked').fadeOut(200);
    $(this).parent().parent().children('.bubble-unlike').fadeOut(200);
    $("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/remove_post_like.php?post_id=' + number);
});

我将此行添加到加载的脚本 add_post_like 和 remove_post_like 中:

$('.bubble a').show();

现在好像只接受一次点击..可靠吗？

Answer 1

您可以在每次单击按钮时禁用单击事件，直到加载过程结束。然后在回调函数中完成后激活事件。

血淋淋的细节:http://api.jquery.com/load/

更新:

我为您做了一个简单的例子:http://jsfiddle.net/hvfc5/1/

当您单击按钮时，它会首先删除按钮上的事件绑定(bind)，然后在图像加载后再次将其绑定(bind)回来。但如果此后你再次点击它，你会发现该事件仍然可以解绑，但它再也不会回来了。因为图片已经加载完毕，所以load()函数不会被触发。

这只是一个演示示例，供您了解如何操作事物，您仍然需要根据需要自定义自己的版本。