for loop and interval - Javascript

rikobgrff
April 11, 2023
224 views
1 vote
2 Answers

I want to change the visibility of the elements of class container_element with an interval of one second one by one.
i tried solve my problem with for loop but when i try to setInterval in for loop it stops and doesnt show anything.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task</title>
</head>
<style>
    .container {
        border: 5px solid;
        text-align: center;
    }

    .container_element {
        visibility: hidden;
    }
</style>

<body>
    <div class="container">
        <div class="container_element">🚢</div>
        <div class="container_element">🚓</div>
        <div class="container_element">✈️</div>
        <div class="container_element">🚀</div>
        <div class="container_element">🚩</div>
        <div class="container_element">🏨</div>
    </div>
</body>
</html>

i tried this,but it did not work.

<script>
    function showDiv() {
        var items = document.querySelectorAll(".container_element");
        for (i = 1; i < items.length; i++) {
            setInterval(() => {
                items[i].style.visibility = 'visible';
            }, 1000);
        }
    }
    showDiv();
</script>

Answers

Don’t use a loop, setInterval() already makes the function repeat. Each iteration of that should make the next element visible.

function showDiv() {
  let i = 0;
  var items = document.querySelectorAll(".container_element");
  let interval = setInterval(() => {
    items[i].style.visibility = 'visible';
    i++;
    if (i >= items.length) {
      clearInterval(interval);
    }
  }, 1000);
}

showDiv();

.container {
  border: 5px solid;
  text-align: center;
}

.container_element {
  visibility: hidden;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Task</title>
</head>

<body>
  <div class="container">
    <div class="container_element">🚢</div>
    <div class="container_element">🚓</div>
    <div class="container_element">✈️</div>
    <div class="container_element">🚀</div>
    <div class="container_element">🚩</div>
    <div class="container_element">🏨</div>
  </div>
</body>

</html>

You should use an async/await approach to simplify your logic:

showContainerElements();

async function showContainerElements() {
  const items = document.querySelectorAll('.container-element');
  for (let i = 0; i < items.length; i++) {
    await sleep(1000);
    items[i].classList.add('container-element-visible');
  }
}

async function sleep(delayInMs) {
  return new Promise(function(resolve) {
    setTimeout(resolve, delayInMs);
  });
}

.container {
  border: 5px solid;
  text-align: center;
}

.container-element {
  visibility: hidden;
}

.container-element-visible {
  visibility: visible;
}

<div class="container">
  <div class="container-element">🚢</div>
  <div class="container-element">🚓</div>
  <div class="container-element">✈️</div>
  <div class="container-element">🚀</div>
  <div class="container-element">🚩</div>
  <div class="container-element">🏨</div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

for loop and interval – Javascript

Answers