javascript 中只有一个按钮的定时器停止和继续功能

Question

我想构建一个由一个开始按钮控制的计时器。单击时，它会将 innertext 更改为“停止”并开始倒计时，当再次单击时，它将更改为“继续”并暂停倒计时。问题是我不知道如何控制 setinterval，因为我在 dfferent if 语句中声明它，我无法从其他地方访问 setinterval 变量。代码：

const change = document.getElementById("change") -> countdown text part
const sb = document.getElementById("start") // button -> stop & pause
let stop = true; 
let i; // setinterval variable


sb.addEventListener("click", () => {
    let a = parseInt(change.innerText);
    if(stop && a != 0) {
        stop = false;
        sb.innerText = "Stop";
        i = setInterval(()=> {
        a --;
        change.innerText = a;
        if(a == 0) {
            stop = true;
            alert("Time's Out!")
            clearInterval(i);
            sb.innerText = "Start";
        }
        }, 1000)
    }
    
    else if (!stop) {
        stop = true;
        sb.innerText = "continue";
// how to change this part to access setInterval variable i?
    }
})

Answer 1

您应该能够在 if-statement 的任一部分中调用 clearInterval，因为它是在两者的范围之外声明的。看这里，一个工作示例：

const s = document.querySelector('span');
const b = document.querySelector('button');

let interval = null;
b.onclick = () => {
  // Start the interval
  if (!interval) {
    interval = setInterval(() => {
      s.innerText = parseInt(s.innerText) - 1;
    }, 1000);
    
    b.innerText = "Pause";
  } else {
    clearInterval(interval);
    interval = null;
    
    b.innerText = "Resume";
  }
}

<span id="countdown">100</span>
<button>Start</button>

javascript 中只有一个按钮的定时器停止和继续功能

timer stop & continue function in only one button in javascript

javascript

setinterval