如何清除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

您可以使用以下方法清除計時器：

• setTimeout clearTimeout
• setInterval clearInterval

例：

 // 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)