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 标志为真时触发了其他事件，则从事件返回而不采取任何操作。

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