-2

I have combined onclick event with window opener function but the codes are messing up and not opening windows as per the given time 5 seconds I want to open all windows exact after 5 seconds one by one no matter how many windows are there.

here is my JSFiddle

let newWindow = null;

    function openLink(link){
      if(newWindow === null){
        newWindow = window.open(link, '_blank');
      }
      else{
        newWindow.location.href = link;
      }
    }

    flink.onclick = function() {    
        openLink('https://www.baidu.com');
        setTimeout(() => openLink('https://www.reddit.com'), 5000);
        setTimeout(() => openLink('https://www.youtube.com'), 5000);
        setTimeout(() => openLink('https://www.stackoverflow.com'), 5000);
    }
<a id="flink" href="javascript:void();" onclick="openLink();">Visit Link</a><br>
David
  • 208,112
  • 36
  • 198
  • 279
K.Mughal
  • 59
  • 5
  • But you are replacing the one open window with addresses. What else should happen? – Konrad Oct 17 '22 at 20:00
  • All links not opening properly not opening one by one after 5 seconds, Its just open 1st link and quickly the last link, Its not even opening in the order. – K.Mughal Oct 17 '22 at 20:05
  • 1
    @K.Mughal: The code linked is doing exactly what I would expect it to do. It immediately opens a new window to the first link, then in 5 seconds updates that same new window to 3 other links in rapid succession, which means only the last of those 3 will remain. What behavior were you expecting from this code and why? Perhaps you could start with something simpler and explain why that one specific operation should be doing something else? – David Oct 17 '22 at 20:09
  • @David I want all the links will update in window one by one after 5 seconds eg: first link is `Baidu` after 5 seconds its opening the 2nd link which is `Reddit` it has to be opened for another 5 seconds and then `youtube` another 5 seconds and so on. I want each and every link to open and up for 5 seconds then change to the next one. – K.Mughal Oct 17 '22 at 20:16
  • @K.Mughal: Then you'd have to set them to happen 5 seconds after each one. Currently they're all set to happen 5 seconds from the same time. So they all happen in 5 seconds, at the same time. – David Oct 17 '22 at 20:23
  • This is what I'm asking, how to fix this code to work as I'm expecting. – K.Mughal Oct 17 '22 at 20:27

1 Answers1

1

From a comment on the question above:

I want all the links will update in window one by one after 5 seconds

So basically you want:

  1. Open first link
  2. Wait 5 seconds
  3. Open second link
  4. Wait 5 seconds
  5. Open third link
  6. Wait 5 seconds
  7. Open fourth link

Currently what you have is:

  1. Open first link
  2. Wait 5 seconds
  3. Open second link
  4. Open third link
  5. Open fourth link

Basically, when you do this:

setTimeout(() => openLink('https://www.reddit.com'), 5000);
setTimeout(() => openLink('https://www.youtube.com'), 5000);
setTimeout(() => openLink('https://www.stackoverflow.com'), 5000);

You queue up all three of these things to happen 5 seconds from now. So they will all happen at the same time, 5 seconds from now.

What you want is for each one to happen 5 seconds from the previous one. Which, in this callback structure, could look something like:

setTimeout(() => {
  openLink('https://www.reddit.com');
  setTimeout(() => {
    openLink('https://www.youtube.com');
    setTimeout(() => openLink('https://www.stackoverflow.com'), 5000);
  }, 5000);
}, 5000);

To make the code less confusing, you might also look into a JavaScript analogue of sleep(), in which you'd change each setTimeout into a Promise and await them in order.

David
  • 208,112
  • 36
  • 198
  • 279
  • Thanks a lot @David your function works as I expected but the problem is I have big list of URL's which I want to load in this function eg: 100 URLs in the list or database once the link is clicked function will keep updating all the links from number 1 to 100 with the given wait time, means each click has its own x time to stay open. – K.Mughal Oct 17 '22 at 20:36
  • @K.Mughal: In that case you probably want to look at the other linked question/answer mentioned in this answer to collapse the callback structure and make use of `await`. Then you can just loop over your array or URLs and use that "sleep" functionality to wait for 5 seconds in each iteration of the loop. – David Oct 17 '22 at 20:39