用 js 写的计时器，暂停计时无法生效

Question

是用setInterval每10ms调用一次倒计时方法，想让计时器在倒计时的时候点击停止能暂停，再点能继续                var FnSec=function(){                    sec.innerHTML-=1;                    if(sec.innerHTML<0){                        sec.innerHTML="100";                        time.innerHTML-=1;                    }                    if(time.innerHTML.length<2){                        time.innerHTML="0"+time.innerHTML;                    }                    if(sec.innerHTML.length<2){                        sec.innerHTML="0"+sec.innerHTML;                    }                    if (sec.innerHTML==0 && time.innerHTML==0) {                        clearInterval(secInterValId);                        var audio = document.getElementById("bgMusic");                        audio.play();                        window.alert("时间到！");                        audio.pause();                        start.innerHTML="开始";                        inputDisable.style.display="none";                        input.style.display="block";                        resetDisable.style.display="block";                        reset.style.display="none";                        time.innerHTML="10";                        sec.innerHTML="00";                    }                }                var secInterValId=setInterval(FnSec,10);                start.innerHTML="停止";刚学前端，今天刚学了间歇调用，小白捣鼓了一晚上都不行，没辙了，求大神帮忙看一下！！

Answer 1

secInterValId 改成全局变量，使得可以保存上一次的 setInterval 值。否则每次点击同一个按钮 secInterValId 都将被重置

以下伪代码仅供参考

(function () {

  var secInterValId = null

  startBtn.addEventListener('click', () => {

    secInterValId = setInterval(fn, 10)

  })

  pauseBtn.addEventListener('click', () => {

    clearIntervalId(secInterValId)

  })

}())

Answer 2

我给个另外的思路，直接加个状态变量进行控制就行了，比如说：

var paused = false,

    timer = null;

function loop(){

    timer = setTimeout(loop,10);

    if(paused) return false;

    //这里主代码

}

//当你需要暂停的时候，改变paused的值就行了,这当你在一个计时器下，需要分开管理不同功能的状态的时候很有用。如果确实需要销毁计时器，再clear(timer)变量就行