How to disable the click if a function is in active status

Question

I have created a fiddle of my function here( http://jsfiddle.net/rhy5K/10/ ) . Now i want to disable the button click i.e play/pause if the sound is playing like Get ready,5,4,3,2,1 .

I know only how to disable the form submit button , but I am very confused how to disable the click in my case the hyperlinks.

Explanation using code example:

I want to disable this

<a href="#" id="btn_start">PLAY</a>

click, while interpreter is executing the below code:

var playGetReady = function (done) {
    var ids = ['audiosource', 'a_5', 'a_4', 'a_3', 'a_2', 'a_1'],
        playNext = function () {
            var id = ids.shift();
            document.getElementById(id).play();
            if (ids.length) {
                setTimeout(playNext, 1000);
            } else {
                done();
            }
        };
    playNext();
};

Warning: This JS fiddle demo may play sound on load

Why i a not receiving any answer for this above question. Does my question is not proper or some other mistake from my side? — beginner, Oct 06 '13 at 07:24
Welcome on StackOverflow. StackOverflow is a place where mostly humans dwell. While there are some wizards that can write up the most amazing answers in 6 minutes time, most humans require a little more than that. Please... be patient... — Sumurai8, Oct 06 '13 at 07:28
http://stackoverflow.com/questions/9437228/html5-check-if-audio-is-playing — Sergio, Oct 06 '13 at 07:29
an easy solution... set a flag e.g. `window.__compilerbusy = true` when running the timer, set it to false when timer is done. In btn click handler, check for the flag. — gp., Oct 06 '13 at 07:32
`while complier is executing` no it's `interpreter` in case of `JavaScript`. — The Alpha, Oct 06 '13 at 07:33
@gp. Thank you, but i found `Recovering Since 2003` answer very easy and fast. — beginner, Oct 06 '13 at 09:51

The Alpha · Accepted Answer · 2013-10-06T08:28:30.473

1

You may try this (Changes in following function), but not sure if this is you want and maybe there are other ways to do it.

App.prototype.start = function () {
    var self = this;
    // unbind for a while
    self.$button.unbind('click', self.buttonHandler); // <--
    var start = function () {
            // start countdown
            self.intervalHandle = setInterval($.proxy(self.tick, self), 1000);
            // bind again
            self.$button.click($.proxy(self.buttonHandler, self)); // <--
            // change button text to PAUSE
            self.$button.text('PAUSE');
        };

    if (this.newTimer) {
        playGetReady(start);
    } else {
        start();
    }
};

DEMO.

edited Oct 06 '13 at 08:28

answered Oct 06 '13 at 08:22

The Alpha

143,660
29
287
307

Actually I didn't look in other functions properly but logic is same, maybe not the same context. – The Alpha Oct 06 '13 at 09:16
Can you be more specific about functions you are taking about ? – The Alpha Oct 06 '13 at 09:18
I think you want [this one](http://jsfiddle.net/rhy5K/22/). Check the `App.prototype.end` last line in `else`. – The Alpha Oct 06 '13 at 09:47
Glad to know that, then how much you are going to transfer in to my account, lol! :p – The Alpha Oct 06 '13 at 09:55
Did you try to get Google Adsense for your website `heera.it` ? – beginner Oct 06 '13 at 11:49

score 0 · Answer 2 · answered Oct 06 '13 at 08:10

In jquery, it can be done easily by cancel default action. Here's the sample.

$("#btn_start").click(function(event){      
    if(not_active_flag){
        // Prevent anchor to active
        return false;
    }else{
        // Anchor active as usual
        return true;
    }       
});

score 0 · Answer 3 · answered Oct 06 '13 at 08:13

In your case, the link will ultimately call this.buttonHandler, which has the following code:

App.prototype.buttonHandler = function (e) {
    e.preventDefault(); // prevent anchor default action
    this.toggle(); // toggle play/pause
};

Because buttonHandler is attached before playGetReady is executed, it is not possible to let playGetReady attach a click handler to that anchor element that uses .stopImmediatePropagation() to prevent the other click handler from executing.

In this case @gp.'s solution in the comments is most likely the best solution. In your case you might even be able to use a local variable in your app. If you use a global variable, reference it with window.yourglobalvariable. If you use a local variable, make sure you define it somewhere and reference it with this.yourvariable. Change your buttonHandler to:

App.prototype.buttonHandler = function (e) {
    e.preventDefault(); // prevent anchor default action
    if( this.soundready )
        this.toggle(); // toggle play/pause
};

On the appropiate place make this variable false to prevent the 'button' from working. When the button should work, change the variable to true. I think that should be just before done() in the code you have in your question, but you probably have a better idea in what order the code is executed.

How to disable the click if a function is in active status

3 Answers3