双击一个元素

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 ... */ 
});