在這種情況下如何阻止jQuery函數執行多次？

Question

我正在使用jQuery和.load函數來更新計數，但是如果點擊這麼快，它可能會被黑客入侵。此外，我無法使用解除綁定，因爲這會使按鈕在第一次點擊後無法使用。

這裏是我點擊按鈕時使用的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> 

如果我點擊太快或反之亦然，則加載會多次執行。我還解釋說，解綁並沒有幫助。

有什麼想法？

UPDATE

我不知道如果我這樣做是正確的，但它似乎解決它在我的情況..誰能正確/讓我錯了嗎？

我加入這行到我的點擊處理

// 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/

UPDATE：

我做了一個簡單的例子給你：http://jsfiddle.net/hvfc5/1/

當你按一下按鈕，它會首先消除對事件綁定按鈕，然後在加載圖像後再將其綁定。但是如果你在此之後再次點擊它，你會發現事件仍然可以解除綁定，但它永遠不會回來。這是因爲圖像已被加載，因此load（）函數甚至不會被觸發。

這只是一個演示樣本，讓您瞭解如何操作事物，您仍然需要根據需要自定義您自己的版本。

Answer 2

是的：按鈕點擊的第一個動作是禁用按鈕本身。這樣，快速點擊不再可能。當然，你必須在加載後重新啓用按鈕。

更新

唉...這是所有關於德codez吧？

$(".bubble-like a").click(function() { 
    $(".bubble-like a").attr('disabled', 'disabled'); 
    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, 
          function(){ 
           $(".bubble-like a").removeAttr('disabled'); 
          }); 
}); 

Answer 3

您可以禁用該按鈕，因爲它被點擊並在點擊其他按鈕（例如切換）時啓用該按鈕。點擊喜歡時禁用它並啓用不同，反之亦然。

Answer 4

one()功能浮現在腦海。

http://api.jquery.com/one/

Answer 5

$(".bubble-like a").click(function() { 
    var button = $(this); 
    $(this).wrap($('<button/>', { 
           "class" : "disButton", 
           disabled: true, 
           width: button.width() 
           } 
        )); // wrap the anchor with button with disabled property 
    ... 
    .. 
    $("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/add_post_like.php?post_id=' + number, function() { 
    button.unwrap(); // remove the wrapping button 
    }); 
}); 

你必須糾正一些CSS使按鈕看起來像一個簡單的文本。例如，

button.disButton { 
    border: none; 
    background: transparent; 
} 

button.disButton a{ 
    color: #ddd; 
    text-decoration: none; 
}