Question

我有倒计时功能。该函数使用setTimeout()重复调用自身：

function countDownSendCode(timer) {
    if(timer >= 0) {
        document.querySelector('#send-code').setAttribute('disabled', true);
        document.querySelector('#send-code').innerHTML = timer + 's later resend';
        setTimeout(function() {
            countDownSendCode(timer - 1);
        }, 1000);
    } else {
        document.querySelector('#send-code').removeAttribute('disabled');
        document.querySelector('#send-code').innerHTML = 'Send';
    }
}

document.querySelector('#send-code')是用于发送代码的按钮。当用户单击该按钮时，他无法再次单击该按钮，直到倒计时结束。

我将以下功能添加到按钮的click事件中以调用倒计时：

function clickSendCode(ev) {
  ev.preventDefault();

  countDownSendCode(5);    // call the count down here

  handleAjaxRequest();
}

在某些情况下，在handleAjaxRequest()中，我需要停止倒计时并立即使按钮可用。

我可以致电countDownSendCode(-1)设置按钮，但如何清除setTimeout()？因为它是自己调用的，所以我无法获得clearTimeout()所需的timeID。

Answer 1

您可以实现此功能，如以下代码段所示：

// global var serving as a handle to Timer
var _timer;

// call this function to start timer
function StartMyTimer() 
{
    _timer = setTimeout(function(){ alert("Hello, Timer is Running!"); }, 5000);
}

// call this function to stop timer
function StopMyTimer() 
{ 
  clearTimeout(_timer);
}

我还建议您考虑一对函数：setInterval()和clearInterval()，它们可以简化重复性任务的编码。

希望这会有所帮助。

Answer 2

我建议不要递归调用countDownSendCode（）。而只是将计时器设置为正确的秒数，然后您可以将ref返回到计时器并将其传递给ajax处理程序。

Answer 3

function countDownSendCode(timer) { 
    if(timer >= 0) {
        document.querySelector('#send-code').setAttribute('disabled', true);
        document.querySelector('#send-code').innerHTML = timer + 's later resend';
       countDownSendCode._timer = setTimeout(function() {
            countDownSendCode(timer - 1);
        }, 1000);
    } 
    else {
        if('stop'===timer){
            clearTimeout(countDownSendCode._timer);     
        }
        document.querySelector('#send-code').removeAttribute('disabled');
        document.querySelector('#send-code').innerHTML = 'Send';
    }
}

修改countDownSendCode函数，如上所示。当您需要立即使用该按钮时，请使用＆＃39;停止＆＃39; 字符串调用它。

如何停止自称的setTimeout（）函数？

3 个答案: