鍍金池/ 問答/HTML/ 用 js 寫的計(jì)時(shí)器，暫停計(jì)時(shí)無法生效

用 js 寫的計(jì)時(shí)器，暫停計(jì)時(shí)無法生效

圖片描述

圖片描述

是用setInterval每10ms調(diào)用一次倒計(jì)時(shí)方法，想讓計(jì)時(shí)器在倒計(jì)時(shí)的時(shí)候點(diǎn)擊停止能暫停，再點(diǎn)能繼續(xù)

                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("時(shí)間到！");
                        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="停止";

剛學(xué)前端，今天剛學(xué)了間歇調(diào)用，小白搗鼓了一晚上都不行，沒轍了，求大神幫忙看一下?。?/p>

回答
編輯回答
兮顏

secInterValId 改成全局變量，使得可以保存上一次的 setInterval 值。否則每次點(diǎn)擊同一個(gè)按鈕 secInterValId 都將被重置

以下偽代碼僅供參考

(function () {
  var secInterValId = null

  startBtn.addEventListener('click', () => {
    secInterValId = setInterval(fn, 10)
  })

  pauseBtn.addEventListener('click', () => {
    clearIntervalId(secInterValId)
  })
}())
2018年9月9日 01:38
編輯回答
青瓷

我給個(gè)另外的思路，直接加個(gè)狀態(tài)變量進(jìn)行控制就行了，比如說：

var paused = false,
    timer = null;
function loop(){
    timer = setTimeout(loop,10);
    if(paused) return false;
    //這里主代碼
}

//當(dāng)你需要暫停的時(shí)候，改變paused的值就行了,這當(dāng)你在一個(gè)計(jì)時(shí)器下，需要分開管理不同功能的狀態(tài)的時(shí)候很有用。如果確實(shí)需要銷毀計(jì)時(shí)器，再clear(timer)變量就行
2018年8月8日 06:14