Javascript Bind and Unbind function call

Question

I have this following code in in jquery.

$(document).ready(function () {
    console.log('Hello');

    var uploadButton = $('#upload-button');

    uploadButton.on('click', function () {
        uploadButton.unbind('click');
        progressBar();
        uploadButton.bind('click');
    });

});

function progressBar(){

    var element = document.getElementById('bar');
    var width = 1;
    var id = setInterval(addFrame, 25);

    function addFrame() {
        if(width == 100){
            clearInterval(id);

            element.style.width = 0;
            return true;
        }

        width += 1;
        element.style.width = width + '%';
    }

}

What I'm trying to do is to call a function for a progress bat when an HTML button item is being pressed, but also try to disable anymore calls until the current call is finished. By initial idea was to unbind the click event when it is being pressed, execute the function, and then bind click again to the same element, but so far, the only thing I get is only one call of progressBar and after that, the button remains unbound for click.
What am I doing wrong?
Thank you.

Look here for examples on how you can remove the click event temporarily: http://stackoverflow.com/questions/1921855/jquery-how-can-i-temporarily-disable-the-onclick-event-listener-after-the-even — Benedikt, May 07 '17 at 13:42

score 1 · Accepted Answer · answered May 07 '17 at 14:14

The problem with your code is the unbind method, this method don't put the event in on/off, else that it removes the function associated to the button, the unbind isn't the way to resolve that. For temporary removes click event i recommend to do this:

disable the HTML button using $('#myButton').prop('disabled', true)
and enable that, after in a callback function of the progressbar function using $('#myButton').prop('disabled', false)

I hope this can help you

score 0 · Answer 2 · answered May 07 '17 at 14:07

I found the answer on my own, using prop.

$(document).ready(function () {
    console.log('Hello');

    var uploadButton = $('#upload-button');

    uploadButton.on('click', function () {
        console.log('clicked');
        progressBar(uploadButton);
    });

});

function progressBar(target){

    target.prop('disabled', true);

    var element = document.getElementById('bar');
    var width = 1;
    var id = setInterval(addFrame, 25);

    function addFrame() {
        if(width == 99){
            clearInterval(id);
            element.style.width = 0 + '%';

            target.prop('disabled', false);
        }

        //make it to display actual file upload

        width += 1;
        element.style.width = width + '%';
    }
}

Passing the object as parameter, I managed to disable it, make my operations, and enable it after that. Might work with other attributes as well.

Javascript Bind and Unbind function call

2 Answers2