Question

我有一个带有倒计时的模态内的按钮，首先它被禁用（是真的），但在倒计时后它会变为禁用。

如果我离开按钮倒计时直到结束，然后我再次测试它（关闭我的模态并再次打开它），它再次开始倒计时，它现在可以正常工作。

但它有一个奇怪的错误。

如果在倒计时的中间，我关闭模态，然后再次打开它，我的倒计时重新启动，但它会顺时针到倒计时结束，它不会通过所有数字。

这是我的代码：

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>

控制器：

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

关闭模态时，您还应该中止间隔。再次打开模态时它仍在运行，因此它会影响第二个模态。或者，检查是否设置了间隔并在打开之前将其清除。

Answer 2

您需要在启动计时器之前重置计时器和按钮。

vm.unblock = true;

// Make your timer variable global
var timer = null;

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

    // Clear old timer
    $interval.cancel(timer);

    // Block the button
    vm.unblock = true; // Check this part of code...
    vm.btn = "btn-red"; // This too...

    // Start new timer
    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);
}

按钮倒计时启用

2 个答案: