Javascript open a windows after a delay then close it after another delay

user_19733913 0
Viewed 59

I try to create a JavaScript function that, when user clicks on a button, opens a new tab after a small timeframe then wait one second and close it.

Currently, my code looks like this:

var btn = document.getElementById("myLink");
btn.onclick = function() {
    setTimeout(function() {
        var win = window.open(
        "http://www.stackoverflow.com", 
        "The new Link")
    },500);
    setTimeout(function(){
            win.close();
        if (win.closed) {
            clearInterval(timer);
            winClosed();
            alert("'The new Link' window closed !");
        }
    }, 2500);
}

But the second setTimeout function is not executed. When I remove one of the two setTimeout function, the other one works fine, but I need to have the two running.

Edit: changed timeout values to take into account @lk77 comment.

html javascript
2 Answers

There are 2 issues in your code.

  1. you are initializing the variable win in the first timeout, meaning it will not be available in the second timeout. You might want to read about closure & scoping in javascript.
  2. Your first timeout has a delay of 1500 ms and the second one 500, meaning that the second timeout fires before the first one.

This should be working:

var btn = document.getElementById("myLink");
btn.onclick = function() {
    var win = null; // initialize here so it is available in both timeouts
    setTimeout(function() {
        win = window.open( // set the value here
        "http://www.stackoverflow.com", 
        "The new Link")
    },500); // this should fire first
    setTimeout(function(){
            win.close();
        if (win.closed) {
            clearInterval(timer);
            winClosed();
            alert("'The new Link' window closed !");
        }
    }, 1500); // this should fire second
}
user_25353150

The second setTimout's callback will gets executed before the first one as you did. On way to solve this issue is to add the second setTimeout inside the first one, like so:

let btn = document.getElementById("myLink");
btn.onclick = function () {
  setTimeout(function () {
    let win = window.open("http://www.stackoverflow.com", "The new Link");
    let timer = setTimeout(function () {
      win.close();
      if (win.closed) {
        clearInterval(timer);
        //winClosed();
        //alert("'The new Link' window closed !");
      }
    }, 1000);
  }, 500);
};
user_152886410
Related