Question

I make a script. That load a new image in a img tag. This is the script:

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');
});

But, i have a problem with this script. When you click fast on a button. If you are very quick succession click. Than the script doing al that click events. How can i fix that.

Answer 1

Use a flag set it to true as soon as the event execution starts and set it to false when exectuion end. If some other event is fired while alreadClicked flag is true then return from event without taking any action.

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;
});