如何清除JS计时器

Question

我有一个从数据库中获取的用户。对于每个用户都可以重置他的密码。但它可能只有一次三分钟。如果密码重置不到三分钟，我会用JS显示计时器，它显示下一次重置剩余时间并且重置按钮被禁用。倒计时结束后，按钮变为可用并显示“密码重置可用”字样。因为每个用户都有自己的计时器，当我选择另一个用户时，前一个计时器必须用reset（）函数停止，并且必须启动其他计时器。它只是一次只能有一个计时器。

计时器：

var timerCount = 0;


function startTimer(minute, second) {
    timerCount++;
    start(minute, second);
}

function start(minute, second) {
    disableButton('resetPasswordButton');
    var m = minute;
    var s = second;
    if (timerCount == 0) {
        document.getElementById('expiredTimeOutputText').innerHTML = "Password reset avaliable";
        m = 0;
        s = 0;
        enableButton('resetPasswordButton');
        return ;
    }
    if (s == 0) {
        if (m == 0) {
            reset();
            document.getElementById('expiredTimeOutputText').innerHTML = "Password reset avaliable!";
            enableButton('resetPasswordButton');
            return ;
        }
        m--;
        s = 59;
    } else
        s--;
    document.getElementById('expiredTimeOutputText').innerHTML = m + ":" + s;
    setTimeout(function () {
        start(m, s);
    }, 1000);
}


function reset() {
    if (timerCount > 0) {
        timerCount = 0;
    }
}


function enableButton(id){
    document.getElementById(id).disabled = false;
}

function disableButton(id){
    document.getElementById(id).disabled = true;
}

按钮单击启动计时器的方法

public void changePassword() {
    RequestContext requestContext = RequestContext.getCurrentInstance();
    requestContext.execute("startTimer(\"0\", \"40\")");
    Date tmpDate = new Date();
    Long diff = tmpDate.getTime();
    mainDataBean.setResetTimer(applicantsTableSelectedRow.get("ID"), diff.toString());    
}

启动用户更改计时器的方法

public void checkTimerForNewUser() {
    RequestContext requestContext = RequestContext.getCurrentInstance();
    Date tmpDate = new Date();
    Long currentTime = tmpDate.getTime();
    requestContext.execute("reset()");
    if (applicantsTableSelectedRow != null) {
        if (!mainDataBean.getResetTimer(applicantsTableSelectedRow.get("ID")).equals("noTimer")) {
            Long applicantTimerTime = Long.parseLong(mainDataBean.getResetTimer(applicantsTableSelectedRow.get("ID")));
            if (currentTime - applicantTimerTime > timerValue) {
                mainDataBean.deleteResetTimer(applicantsTableSelectedRow.get("ID"));
            }
            else {
                expiredTimeMinute = (timerValue - (currentTime - applicantTimerTime)) / 60000;
                expiredTimeSecond = (timerValue - (currentTime - applicantTimerTime)) / 1000 - expiredTimeMinute * 60;
                requestContext.execute("startTimer(\"" + expiredTimeMinute + "\", \"" + expiredTimeSecond + "\")");
            }
        }
    }
}

如果一个接一个地重置用户密码，一切正常。但是，如果我一直为5个用户重置密码，之后我会重新使用重置密码的用户，如果时间没有到期，我会得到所有5个计时器，它们相互重叠，5次不同时间显示5次。但理论上它们必须因复位功能而停止。如何才能使唯一的计时器存在？我是否停止了错误的功能？

clearTimeout示例：

function start(minute, second) {
    disableButton('resetPasswordButton');
    var m = minute;
    var s = second;
    if (timerCount == 0) {
        document.getElementById('expiredTimeOutputText').innerHTML = "Reset Button Available!";
        clearTimeout(timeout);
        enableButton('resetPasswordButton');
        return ;
    }
    if (s == 0) {
        if (m == 0) {
            reset();
            clearTimeout(timeout);
            document.getElementById('expiredTimeOutputText').innerHTML = "Reset Button Available!";
            enableButton('resetPasswordButton');
            return ;
        }
        m--;
        s = 59;
    } else
        s--;
    document.getElementById('expiredTimeOutputText').innerHTML = m + ":" + s;
    timeout = setTimeout(function () {
        start(m, s);
    }, 1000);
}

Answer 1

您可以使用以下内容清除计时器：

{li> clearTimeout setTimeout {li> clearInterval setInterval

实施例

＆＃13;

＆＃13;

// will *never* run since we clear it below, immediately after we
// create it.
var timeout = setTimeout(() => {  
  console.log('foo')
}, 1000)

clearTimeout(timeout)

// will run only *once* since we clear it when it's called
var interval = setInterval(() => {  
  console.log('bar')
  clearInterval(interval)
}, 1000)

＆＃13;

＆＃13;

＆＃13;