我将如何在 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)
  }
}
})