雙擊一個元素

Question

我製作一個腳本。在img標籤中加載新圖片。這是腳本：

button.click(function(e) { 
    e.preventDefault(); 

    var url = $(this).attr("href"); 
    var img = $('#photo-gallery .teaser img'); 

    $('li', list).attr('data-flag', 'close'); 

    img.animate({ opacity: 0 }, 500, function() { 
     $('img', teaser).attr("src", url); 
    }); 

    img.animate({ opacity: 1 }, 500) 

    $(this).closest('li').attr('data-flag', 'open'); 
}); 

但是，我有這個腳本的問題。當你快速點擊按鈕時。如果你很快繼承點擊。比那個單擊事件的腳本。我該如何解決這個問題。

Answer 1

使用標誌將其設置爲true as soon as the event execution starts，並在exectuion結束時將其設置爲false。 如果一些其他事件被觸發，而alreadClicked標誌爲true，那麼從事件返回而不採取任何行動。

alreadClicked = false; 

button.click(function(e) {  

    if(alreadClicked) 
     return; 

    alreadClicked = true; 
    e.preventDefault(); 
    var url = $(this).attr("href"); 
    var img = $('#photo-gallery .teaser img'); 

    $('li', list).attr('data-flag', 'close'); 

    img.animate({ opacity: 0 }, 500, function() { 
     $('img', teaser).attr("src", url); 
    }); 

    img.animate({ opacity: 1 }, 500) 

    $(this).closest('li').attr('data-flag', 'open'); 
    alreadClicked = false; 
}); 

Answer 2

JQuery的one允許執行事件只有一次

button.one("click", function(e) { 
    /* code ... */ 
});