我將如何在 Javascript 中創建一個暫停按鈕？

Question

按下開始按鈕（按鈕 0）后，我的所有功能都會執行：

<button class="button" id= "start">Start</button>
<button class="button" id= "pause">Pause</button>

document.getElementsByTagName('button')[0].addEventListener('click', function() {
        step1();
        step2();
        step3();
        step4();
        step5();
        step6();
        step7();
        step8();
        step9();
        step10();
        step11();
        step12();
        step13();
        step14();
        
    })

示例 function 使用 setTimeOut()

function step1() {
        setTimeout(() =>{
            $("#arrow1").show();
            $("#box").text("1. Step 1");
            document.getElementById('box1').style.cssText = 'background-color: white';
            document.getElementById('box2').style.cssText = 'background-color: red'; 
        }, 1000)  
    }

是否可以通過單擊暫停按鈕在中間暫停？ 它必須能夠在之后再次播放，可能是通過單擊一個單獨的播放按鈕。

Answer 1

也許是這樣的。 到目前為止我還沒有測試。

let pause = false

document.getElementsByTagName('button')[1].addEventListener('click', function() {
  pause != pause
} ) 


let steps = [
        step1,
        step2,
        step3,
        step4,
        step5,
        step6,
        step7,
        step8,
        step9,
        step10,
        step11,
        step12,
        step13,
        step14
]

document.getElementsByTagName('button')[0].addEventListener('click', function() {
let i = 0;
while(i < steps.length) {
  if(!pause){
    steps[i]()
    ++i
  }else{
    //check whether pause is disabled after one sec
    setTimeout(() => {}, 1000)
  }
}
})