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>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>First put all you img tags in one array :
imgTags = [img1,img2 ...] ;
And before making any image apear make all images disapear :
imgTags.forEach(function(imgTag){
imgTag.style.display = "none";
});
...
img1.style.display = "block";
This will ensure that the images will never be displayed at the same time no matter how slow the dom updates.