Opening ten random images in new tabs

Question

There is a link that opens a random image from unsplash. Here it is: https://source.unsplash.com/random/1920x1080

I intend to open ten tabs with random images. Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-7">
<style>
  body{margin:0px;color:#252430;background-color:#fff}
  p{margin-top: 10em; font-size: 2em;}
</style>
<script>
function openitall(){
             var i;
             for(i=1;i<=10;i++){
                          window.open("https://source.unsplash.com/random/1920x1080","_blank");
             }
}
</script>
</head>
<body onload="openitall()">

<p align=center>I am a page opening ten random images in new tabs.</p>

</body>
</html>

But that way I get ten same images. So I am thinking of a delay:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-7">
<style>
  body{margin:0px;color:#252430;background-color:#fff}
  p{margin-top: 10em; font-size: 2em;}
</style>
<script>
function openitall(){
      setTimeout(window.open("https://source.unsplash.com/random/1920x1080", "_blank"),3000);
      setTimeout(window.open("https://source.unsplash.com/random/1920x1080","_blank"),6000);
      setTimeout(window.open("https://source.unsplash.com/random/1920x1080", "_blank"),3000);
      setTimeout(window.open("https://source.unsplash.com/random/1920x1080", "_blank"),6000);
      setTimeout(window.open("https://source.unsplash.com/random/1920x1080", "_blank"),9000);
      setTimeout(window.open("https://source.unsplash.com/random/1920x1080", "_blank"),12000);
      setTimeout(window.open("https://source.unsplash.com/random/1920x1080", "_blank"),15000);
      setTimeout(window.open("https://source.unsplash.com/random/1920x1080", "_blank"),18000);
      setTimeout(window.open("https://source.unsplash.com/random/1920x1080", "_blank"),21000);
      setTimeout(window.open("https://source.unsplash.com/random/1920x1080", "_blank"),24000);
}
</script>
</head>
<body onload="openitall()">

<p align=center>I am a page opening ten random images in new tabs.</p>

</body>
</html>

But that doesn't help either. All the tabs are immediately opened without any delay. Could you please help?

EDIT: posting this:

Here it is without the parenthesis:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-7">

<style>
  body{margin:0px;color:#252430;background-color:#fff}
  p{margin-top: 10em; font-size: 2em;}
</style>

<script>
function myOpen(){
  window.open("https://source.unsplash.com/random/1920x1080", "_blank");
}

function openitall(){
    for(var i=1;i<=10;i++){
        setTimeout(myOpen,5000);
    }  
}
</script>

</head>
<body onload="openitall()">

<p align=center>I am a page opening ten random images in new tabs.</p>

</body>
</html>

And it still does not work..

Voting to close as duplicate of [Why is the method executed immediately when I use setTimeout?](https://stackoverflow.com/questions/7137401/why-is-the-method-executed-immediately-when-i-use-settimeout) — esqew, Jul 11 '21 at 22:23
But if I modify the code to no parenthesis there, it still does not work.. see below. — Jane N., Jul 11 '21 at 22:37
The answer isn’t to “*not use parenthesis*”. It’s to pass the function *definition* (without executing it), instead of the return value of the executed function. Passing something like the following to the first argument of `setTimeout` should do the trick: `function () { window.open("https://source.unsplash.com/random/1920x1080", "_blank") }` — esqew, Jul 11 '21 at 23:21
You should also know that there is a somewhat high likelihood that adding a timeout to this functionality won’t actually show a new image; what’s likely happening is that the content retrieved from the URL is cached to save on processing power and network bandwidth. If you don’t understand what caching is, why your browser/the server you’re reaching out to performs it, or how it works (at a high level) I would strongly recommend brushing up on it before pressing ahead. — esqew, Jul 11 '21 at 23:23
@esqew: Hello. Using setTimeout(function(){window.open("https://source.unsplash.com/random/1920x1080", "_blank") },3000); I got four different images in ten new tabs. A better stats but not a solution to the initial problem. — Jane N., Jul 11 '21 at 23:25
@esqew: if you open the unsplash link in a address bar of a browser, it generates a new image everytime without any delays.. — Jane N., Jul 11 '21 at 23:27
@JanN. Caching potential aside, is it possible that the “random” image that’s selected is just the same for the six duplicate images? With a relatively small population of images it becomes more likely the RNG simply spits out the same link a few times. — esqew, Jul 11 '21 at 23:31
@JanN. Unless Unsplash’s RNG function is based solely on a relatively imprecise time figure, it’s unlikely that a delay would help in this situation. — esqew, Jul 11 '21 at 23:36

score 0 · Answer 1 · answered Jul 12 '21 at 11:22

please try like this code:

function openitall(){
  var counter = 0;
  var myTimer = setTimeout(function(){
    if(counter == 5){
      clearTimeout(myTimer);
    }else{
        window.open("https://source.unsplash.com/random/1920x1080","_blank");
        counter++;
    }
  }, 5000);
}

Or you need to adjust setTimeout code like below:

setTimeout(function(){window.open("https://source.unsplash.com/random/1920x1080", "_blank")},3000);

Opening ten random images in new tabs

1 Answers1