On click myFunction and wait until it is finished

caramba Published at Dev

caramba

I thought this is something easy to do but I dont find anything helping me out of this.

I have a function

(function($){
    myFunction = function(e){
        e.preventDefault();
        // do stuff
        // load ajax content
        // animate and show
    }
    $('.button').on( 'click', myFunction);
})(jQuery);

now this works but I need to know, wait untill everything is done if someone presses many .buttons in a short time cause there are a few elements with class button

I've tried with promise()

$('.button').on( 'click', function(){
    $.when( myFunction() ).done(function() {
        alert('finished')
    });
});

but that gives me an error e is undefined and

$('.button').on( 'click', myFunction).promise().done(function() {
    alert('finisehd');
});

anyone knowing what I'm doing wrong and how I could do it to get it to work?

mritz_p

The most common solution would be to set a variable inside the click handler when myFunction is called and check its state with every call of the click handler. This could be done somewhere along the lines of this:

(function($){
    var wait = false;

    myFunction = function(e){
        e.preventDefault();

        if (wait) {
            return;
        }

        wait = true;

        // ...

        wait = false;
    }
    $('.button').on( 'click', myFunction);
})(jQuery);

Collected from the Internet

Please contact [email protected] to delete if infringement.