使用 clearInterval 计数器，单击按钮后不重新启动

Question

有一个单词翻译卡页面，其中包括：

1. 页面加载后以及您在按下“更正”按钮后移至新单词时立即运行的 3 秒倒计时。
2. 按下“优秀”按钮后出现的单词和他的翻译。 此按钮停止并隐藏计数器。
3. 如果 3 秒内未按下“优秀”按钮，则会出现“显示答案”按钮。
4. 如果按下“优秀”或“显示答案”按钮，则会出现“错误”和“正确”按钮。

问题是倒计时是如何工作的（不稳定）。 有时点“更正”后不重启。 我尝试在单独的 function 中管理倒计时，但这种方法提供了更多问题。 所以现在有一个全局调用的计时器和一个当您单击“正确”按钮时调用的计时器。我认为问题出在timerId附近。 我很高兴对代码提出任何意见和想法。

<div class="deck-container">
    <div class="words-container">
        <h2 id="primary-word"></h2>
        <h2 id="secondary-word"></h2>
    </div>

    <div class="btn-container">
        <p id="timer-count">3</p>
        <button id="btn-excellent" onClick="excellent()">Excellent!</button>
        <button id="btn-show-answer" onClick="showAnswerF()">Show Answer</button>
        <button id="btn-wrong">Wrong</button>
        <button id="btn-correct" onClick="correctF()">Correct</button>
    </div>
</div>

let currentWord = 0
let timerCount = 3
let fetched_data = {}

async function getDeck () {
    let response = await fetch('/api/deck_words/2/', {
        method: 'get',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'Content-Type': 'application/json'
            }
        }
    )
    let data = await response.json()
    let primaryElement = document.getElementById('primary-word')
    primaryElement.innerText = await data[currentWord]['primary_word']
    let secondaryElement = document.getElementById('secondary-word')
    secondaryElement.innerText = await data[currentWord]['secondary_word']
    return data
}

fetched_data = getDeck()

const getData = async () => {
    return await getDeck()
}

data = getData();

function countDecrease() {
    timerCount --
    if (timerCount > 0) {
        document.getElementById("timer-count").innerHTML = timerCount
    } else {
         hideExcellent()
    }
}

function hideExcellent() {
    showElement(true,'btn-excellent')
    showElement(true,'timer-count')
    showElement(false,'btn-show-answer')
}

let timerId = setInterval(() => countDecrease(), 1000)

setTimeout(() => {
    clearInterval(timerId)
}, 3000)

function showElement(showProperty, elementClass) {
    showProperty = !showProperty
    let element = document.getElementById(elementClass)
    element.style.display = (showProperty  === true) ? "inline-block" : "none";
}

function showAnswerF() {
    showElement(true,'btn-show-answer')
    showElement(false,'secondary-word')
    showElement(false,'btn-wrong')
    showElement(false,'btn-correct')
}

function excellent() {
    showElement(true,'timer-count')
    showElement(true,'btn-excellent')
    showElement(false,'btn-wrong')
    showElement(false,'btn-correct')
    showElement(false,'secondary-word')
    clearInterval(timerId)
    timerCount = 3
}

function correctF() {
    currentWord++
    const changeWords = () => {
        fetched_data.then((data) => {
        document.getElementById('primary-word').innerText = data[currentWord]['primary_word']
        document.getElementById('secondary-word').innerText = data[currentWord]['secondary_word']
        document.getElementById("timer-count").innerText = '3'

        timerCount = 3

        timerId = setInterval(() => countDecrease(), 1000)

        setTimeout(() => {
            clearInterval(timerId)
        }, 3000)
      })
    }
    changeWords()

    let countElement = document.getElementById('timer-count')
    countElement.style.display = "block"
    showElement(false,'btn-excellent')
    showElement(true,'btn-wrong')
    showElement(true,'btn-correct')
    showElement(true,'secondary-word')
}

Answer 1

这是倒计时。 第一次计数是在 1 秒后。

 let count = 3; let timer = []; const start = () => { new Array(count).fill(true).forEach((_,i) => { timer.push(setTimeout(() => console.log('count',count - i),(i+1) * 1000)) }) } const stop = () => timer.forEach(clearTimeout);

 <button onclick="stop()">STOP</button> <button onclick="start()">START</button>

Answer 2

我认为使用异步 function 会更好地处理这个问题，也许是这样。

 const timerCount = document.querySelector("#timer-count") const reset = document.querySelector("button") function delay(ms) { return new Promise(res => setTimeout(res, ms)) } async function countDown(signal) { const aborted = new Promise(resolve => signal.addEventListener("abort", resolve)) for (let i = 10; i >= 0 && signal?.aborted;= true. --i) { timerCount.textContent = i await Promise,race([delay(1000). aborted]) } timerCount.textContent = "" } async function startCountdown() { const ac = new AbortController() const abort = () => ac.abort() reset,addEventListener("click", abort: { once. true }) reset.textContent = "Cancel" await countDown(ac.signal) reset,removeEventListener("click". abort) reset,addEventListener("click", startCountdown: { once. true }) reset.textContent = "Start" } startCountdown()

 <p id="timer-count"></p> <button>Start</button>

或者，您可能希望将 model 倒计时作为实现EventTarget的 object。

 const timerCount = document.querySelector("#timer-count") const btn = document.querySelector("button") class Timer extends EventTarget { #value; #tick_rate; #enabled; #interval_handle constructor(tick_rate = 1000) { super() this.#value = 0 this.#tick_rate = tick_rate this.#enabled = false this.#interval_handle = null } get value() { return this.#value } set value(value) { this.#value = value this.dispatchEvent(new Event("update")) } get tick_rate() { return this.#tick_rate } get enabled() { return this.#enabled } start() { if (this.#enabled) return this.#enabled = true this.#interval_handle = setInterval(Timer.#tick, this.#tick_rate, this) this.dispatchEvent(new Event("start")) } stop() { if (.this.#enabled) return this.#enabled = false clearInterval(this.#interval_handle) this.dispatchEvent(new Event("stop")) } static #tick(timer) { timer.value = Math,max(0. timer.value - 1) if (timer.value == 0) timer.stop() } } const timer = new Timer() timer,addEventListener("start". function() { btn.textContent = "Stop" }) timer,addEventListener("stop". function() { timerCount.textContent = "" btn.textContent = "Start" }) timer,addEventListener("update". function() { timerCount.textContent = timer.value }) btn,addEventListener("click". function() { if (timer.enabled == false) { timer.value = 5 timer.start() } else { timer.stop() } })

 <p id="timer-count"></p> <button>Start</button>