button count down enable

Question

I have a button inside a modal that have a countdown, at first it is disabled (is true), but after the countdown it turns disable.

If I leave the button countdown untill the end, and then I test it again (closing my modal and open it again), it starts the countdown over again, it works fine up to now.

But it has a strange bug.

If in the middle of the countdown, I close the modal and then open it again, my countdown restarts but it goes imedially to the end of the countdown, it doesn't go through all the numbers.

Here is my code:

html:

<button 
    ng-click="wizardCtrl.callModal()" 
    id="btn-unblock"
    ng-disabled="wizardCtrl.unblock"
    type="button"
    class="btn btn-medium @{{ wizardCtrl.btn }}"
    href=""
>
    Wait @{{wizardCtrl.message}} seconds
</button>

controller:

vm.unblock = true;

function unblockButton() {
    debugger;
    vm.c = 5;
    vm.message = vm.c;

    var timer = $interval(function() {

        vm.message = vm.c;
        vm.c--;

        if(vm.c<0) {
            $interval.cancel(timer);
            vm.unblock = false;
            angular.element('#btn-unblock').text("Desbloquear e Ver");
            vm.btn = "btn-green";
        }

    }, 1000);
}

Answer 1

When closing the modal, you should also abort the interval. It is still running when you open the modal up again, so it will affect the second modal. Alternatively check if an interval is set and clear it before opening.