CODEWITHSUNDEEP
jquery
truslivii.lev
truslivii.lev

Reputation: 701

jQuery prevent other events after a click while function in progress

I have two links a with classes .next-button-1 and .prev-button-1 and when I click on the buttons is calls different functions

    $('.next-button-1').click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    gotoNext();
});

$('.prev-button-1').click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    gotoPrev();
});

The performing of each function takes some time. Is there any way to make the button could not click until the function is executed?

upd
I have found the solution:

$('.next-button-1').click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    if ($(this).hasClass('disabled'))
        return false; 
     else {
        $(this).addClass('disabled');
        gotoNext();
    }
});

$('.prev-button-1').click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    if ($(this).hasClass('disabled'))
        return false; 
     else {
        $(this).addClass('disabled');
        gotoPrev();
    }
});

and I remove class 'disabled'
$('.next-button-1').removeClass('disabled'); in gotoNext() function
and
$('.prev-button-1').removeClass('disabled'); in gotoPrev() function

Upvotes: 0

Views: 1734

Answers (1)

Biduleohm
Biduleohm

Reputation: 752

Try this:

$('.next-button-1').click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).prop('disabled', true);
    gotoNext();
});

$('.prev-button-1').click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).prop('disabled', true);
    gotoPrev();
});

Then re-enable it with $(your selector for the button).prop('disabled', false); at the end of the function which take some time to execute.


Edit:

As your buttons are a tags this solution won't work. Instead you can unbind and rebind your events handlers like this:

function nextHandler(e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).unbind("click", nextHandler);
    gotoNext();
}

function prevHandler(e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).unbind("click", prevHandler);
    gotoPrev();
}

$('.next-button-1').click(nextHandler);
$('.prev-button-1').click(prevHandler);

Then re-enable them with $('.next-button-1').click(nextHandler); at the end of your slow function. For clarity and uniformity you might want to use $.bind("click", handler) instead of $.click(handler).

More information about .bind()/.unbind() here.


Better solution:

function nextHandler(e) {
    e.preventDefault();
    e.stopPropagation();
    gotoNext();
}

function prevHandler(e) {
    e.preventDefault();
    e.stopPropagation();
    gotoPrev();
}

$('.next-button-1').one('click', nextHandler);
$('.prev-button-1').one('click', prevHandler);

Then at the end of your slow function add this: $('.next-button-1').one('click', nextHandler); (same form prev of course).

More information about .one() here.

Upvotes: 2

Related Questions