javascript - 要素をダブルクリック

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実行終了時に 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 ... */
});