How to use setTimeout and setInterval to display HTML content?

Question

How to show the image for a few seconds and then hide it and show the rest HTML section.

Initially, I want to display the image for 2 seconds and hide the DIV till the time. After 2 seconds hide the image and display the div only.

What I tried using js

 setTimeout(() => document.getElementById('Image').style.display = 'block', 2000); setInterval(() => document.getElementById('Item').style.display = 'none', 2000);

 <div id="Image"> <img src="../img-correct.png" alt="image"> </div> <div class="item" id="Item"> <h3>Time:</h3> </div>

I am getting the div first then after 2 seconds I am getting an image.

Answer 1

Using Promise andElement.classList 's toggle():

 const wait = ms => new Promise(fn => setTimeout(fn, ms)); const toggle_content = () => { document.querySelector('#Image').classList.toggle("u-none"); document.querySelector('#Item').classList.toggle("u-none"); }; wait(2000).then(toggle_content);

 /* Utility Classes */ .u-none { display: none; }

 <div id="Image"><img src="//placehold.it/100x100/0bf" alt="image"></div> <div id="Item" class="u-none"><h3>HELLO</h3></div>

The best part of the above is that by setting initially an element class as u-none JS will not cause flicks of content.

Answer 2

On loading , you need to show image and hide the item . And on setTimeout callback, hide the image and show the item as follows.

FYI, setTimeout callback is only called one time after the timeout but setInterval callback is called periodically based on the time mentioned on second param.

 document.getElementById('Image').style.display = 'block'; document.getElementById('Item').style.display = 'none'; setTimeout(() => { document.getElementById('Image').style.display = 'none'; document.getElementById('Item').style.display = 'block'; }, 2000);

 <div id="Image"> <img src="../img-correct.png" alt="image"> </div> <div class="item" id="Item"> <h3>Time:</h3> </div>

Answer 3

You can handle a variable as the boolean state of what component will be displayed right now. Then in setInterval , using the variable, display the element you want each call. Like this:

 var imageShow=true; document.getElementById('Item').style.display = 'none'; document.getElementById('Image').style.display = 'block'; setInterval(() => { document.getElementById('Image').style.display = imageShow?'none':'block'; document.getElementById('Item').style.display = imageShow?'block':'none'; imageShow=!imageShow; }, 2000);

 <div id="Image"> <img src="../img-correct.png" alt="image"> </div> <div class="item" id="Item"> <h3>Time:</h3> </div>

Answer 4

<div id="image">
  <img src="../img-correct.png" alt="image">
</div>
<div class="item" id="item">
</div>

// setTimeout allows us to run a function once after the interval of time.
// setInterval allows us to run a function repeatedly, starting after the interval of time, then repeating continuously at that interval.

// displayed and removed after 2seconds
setTimeout(() => document.getElementById('image').style.display = 'none', 2000);

// Waiting 2 seconds to add text to your div with id of "item" (happening once => setTimeout)
setTimeout(() => document.getElementById('item').innerHTML = "time:", 2000);

Codepen => https://codepen.io/zibobilo/pen/WNxvqPL

Answer 5

Set image display to: 'block' and item display to: 'none' then change both after 2000ms.

const item = document.getElementById('Item');
item.style.display = 'none';

const image = document.getElementById('Image');
image.style.display = 'block';

setTimeout(() => {
  item.style.display = 'block';
  image.style.display = 'none';
}
 ,2000);