Todas mis funciones se ejecutan después de presionar un botón de inicio (botón 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(); })Una función de muestra usa 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) }¿Es posible hacer una pausa en el medio con el clic del botón de pausa? Tendría que poder reproducirse nuevamente después, posiblemente haciendo clic en un botón de reproducción separado.
Tal vez algo como esto. No probé hasta ahora.
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) } } })