CODEWITHSUNDEEP
javascriptjquery
Snowlav
Snowlav

Reputation: 465

Disabling call to function for 5 seconds after triggering

I have a button that I want to disable from sending anymore calls to jquery while there is a function "active".

What happens is, every-time a user clicks on the button, the counter gets reduced by 1. However this happens with a delay, see here the steps;

However, the problem right now is that, even while the button is supposed to be disabled, users can just click is X amount of times, and the counter gets reduced with that X amount of times after 5 seconds.

Meaning the calls still go through.

See here what I tried to do so far, but unfortunately with no success..

$( document ).ready(function() {

    var enabled=true;

    $(".myButton").click(function(){

        if(enabled = true) {

        setTimeout(function(){
            var i = document.getElementById('counter2');
            i.innerHTML = parseInt(i.innerHTML)-1;
            $('.progress-bar').css("width", '+=' + '35px');
            $(".myButton").attr('disabled','enabled');
            $('.myButton').css('opacity', '1');
            var enabled=true;
        },5000)
        $(".myButton").attr('disabled','disabled');
        $('.myButton').css('opacity', '0.5');
        var enabled=false;

        } else { }

    });
});

Upvotes: 0

Views: 252

Answers (2)

Reactgular
Reactgular

Reputation: 54821

I don't think you need to track a variable to monitor the state of the button, because you already set an attribute to indicated that it's disabled. So you can just use that attribute as an indicator of it's state.

Also, you are doing this behavior on all buttons of class myButton. So I isolated the handler to just event.target which was the button that was clicked.

$(".myButton")
    .prop('disabled',false)
    .click(function(event){
       // get the button that was clicked.
       var btn = $(event.target);
       if(btn.prop('disabled') === true) {
             // it's already disabled, nothing to do
             return;
       }

       // start a 5 second timer
       setTimeout(function(){
           var i = document.getElementById('counter2');
           i.innerHTML = parseInt(i.innerHTML)-1;
           //$('.progress-bar').css("width", '+=' + '35px');
           // I've never seen += used like this ^^^ does it work?
           var bar = $('.progress-bar');
           bar.css("width", (bar.width() + 35) + 'px');

           // after 5 seconds enable the button
           btn.prop('disabled',false);
           btn.css('opacity', '1');
        },5000);

        // disable the button until timer expires.
        btn.prop('disabled',true);
        btn.css('opacity', '0.5');
    });

Upvotes: 2

TimWolla
TimWolla

Reputation: 32731

if(enabled = true) {
           ^

You meant to write == here. Or even better: if (enabled) as enabled is a boolean anyway.

Using = true is an assignment here as well. And as true is truthy the condition will always evaluate to true.

Upvotes: 2

Related Questions