Display blocks one by one setTimeout

I have two blocks with a random picture change. The first appears every 5 seconds, the second every 10 seconds. As a result, at one moment they are displayed together.

The question is, how can I make these two blocks not touch, but appear in turn?

Can this be done via setTimeout? And then I could not calculate everything correctly. Or should something else be used?

var images = ["http://dummyimage.com/100x100/100/fff",
    "http://dummyimage.com/100x100/304/fff",
    "http://dummyimage.com/100x100/508/fff",
    "http://dummyimage.com/100x100/70B/fff",
    "http://dummyimage.com/100x100/90F/fff",
    "http://dummyimage.com/100x100/AA0/fff",
    "http://dummyimage.com/100x100/CB0/fff",
    "http://dummyimage.com/100x100/EC0/fff"];

const el1 =  document.getElementById("cat1");
const el2 =  document.getElementById("cat2");
const img1 = document.createElement('img');
const img2 = document.createElement('img');

hidePopup1();
hidePopup2();

function popup1() {

  document.getElementById("cat1").style.display = "block";
  randomImage1 = Math.floor(Math.random() * images.length);
  img1.setAttribute('src', images[randomImage1]);
  el1.appendChild(img1);
  setTimeout(hidePopup1, 5000);

}

function popup2() {

  document.getElementById("cat2").style.display = "block";
  randomImage2 = Math.floor(Math.random() * images.length);
  img2.setAttribute('src', images[randomImage2]);
  el2.appendChild(img2);
  setTimeout(hidePopup2, 10000);

}

function hidePopup1() {

  document.getElementById("cat1").style.display = "none";
  setTimeout(popup1, 5000);

}

function hidePopup2() {

  document.getElementById("cat2").style.display = "none";
  setTimeout(popup2, 10000);

}
.cat1 {
  position: absolute;
  left: 20%;
}

.cat2 {
  position: absolute;
  left: 50%;
}
<div id="cat1" class="cat1"></div>
<div id="cat2" class="cat2"></div>

>Solution :

You should combine all hide/show operations in one function, which toggles the display of the elements, and then reverses the elements so that in the next "round" the effect will be opposite.

Also, you can append the images at the start. There is no need to repeat this at every tick of the timer.

I reduced the timeout to 500 milliseconds instead of 5 seconds, so it is easier to verify:

var images = ["http://dummyimage.com/100x100/100/fff",
    "http://dummyimage.com/100x100/304/fff",
    "http://dummyimage.com/100x100/508/fff",
    "http://dummyimage.com/100x100/70B/fff",
    "http://dummyimage.com/100x100/90F/fff",
    "http://dummyimage.com/100x100/AA0/fff",
    "http://dummyimage.com/100x100/CB0/fff",
    "http://dummyimage.com/100x100/EC0/fff"];

const elems = [document.getElementById("cat1"),
               document.getElementById("cat2")];
// Append the images at the start
elems.forEach(el => el.appendChild(document.createElement('img')));

toggle();

function toggle() {
    elems[0].style.display = "block"; // Show the first image
    let randomImage = Math.floor(Math.random() * images.length);
    elems[0].children[0].setAttribute('src', images[randomImage]);
    elems[1].style.display = "none"; // Hide the second image
    elems.reverse();  // This way the next round, the show/hide will be opposite
    setTimeout(toggle, 500);
}
  
.cat1 {
  position: absolute;
  left: 20%;
}

.cat2 {
  position: absolute;
  left: 50%;
}
<div id="cat1" class="cat1"></div>
<div id="cat2" class="cat2"></div>

Leave a Reply