Блог

Я новичок. Я хотел бы создать простой обратный отсчет из массива, запускаемого прослушивателем событий кнопки. Я хочу отобразить элементы массива после задержки в p class=»Обратный отсчет». Однако это работает не так, как я хочу. Нет никакой задержки.

 lt;p class="countdownDisplay"gt;lt;/pgt;  lt;buttongt;Startlt;/buttongt;  

 let countdown = ["5", "4", "3", "2", "1", "Time's up!"];   let btn = document.querySelector("button");   let countdownDisplay = document.querySelector(".countdownDisplay");   btn.addEventListener("click", countdownFunction);   function countdownFunction() {  for (let i = 0; i lt; countdown.length; i  ) {  countdownDisplay.innerText = countdown[i];  console.log(countdown[i]);  }  }   setInterval(countdownFunction, 5000);  

Если вы вызовете цикл for, он добавит от 0 до 5 сразу, и ваш код не будет работать. Я надеюсь, что приведенный ниже код с комментариями поможет вам:

 let countdown = ["5", "4", "3", "2", "1", "Time's up!"];   let btn = document.querySelector("button");   let countdownDisplay = document.querySelector(".countdownDisplay");   //declaring interval outside the function because we need to stop it at the end of counting  let interval   const startInterval = () =gt; {  interval = setInterval(countdownFunction, 1000);  }   btn.addEventListener("click", startInterval);   //declaring the innitial value (first position of the array)  let i = 0   function countdownFunction() {  countdownDisplay.innerText = countdown[i  ];  //if i is the last element of the array, stop the counting  if(i==countdown.length)  clearTimeout(interval)  }   

Удалите петлю «для» из countdownFunction() .

 let countdown = ["5", "4", "3", "2", "1", "Time's up!"];  let i= 0;  function countdownFunction() {  console.log(countdown[i])    i; }  setInterval(countdownFunction, 5000);  

Немного поздно, но вот решение с помощью setTimeout. преимущество этой версии в том, что она заканчивается после обратного отсчета и не продолжается, как в случае с setInterval.

 const countdown = ["5", "4", "3", "2", "1", "Time's up!"]; const countdownDisplay = document.querySelector(".countdownDisplay"); const button = document.querySelector("button");  function countdownFunction(i) {  let _i = i  ;  setTimeout(() =gt; {   console.log(countdown[_i])  countdownDisplay.innerText = countdown[_i];   }, 1000 * _i, countdown[_i]); }  button.addEventListener("click", () =gt; {  for(let i = 0; ilt;countdown.length; i  ) {   countdownFunction(i)   }  });  

 lt;p class="countdownDisplay"gt;Clicklt;/pgt;  lt;buttongt;Startlt;/buttongt;