(After a click event) how to open a list of links in new tabs with a delay after each opening

Question

I'm trying to make a script (for Greasemonkey) that (while visiting a specific page),
if you click the link that I insert into the page
(the link "does nothing", i.e. I use event.preventDefault();)
to open all links in page in new tabs,
but with a delay between each tab opening, eg. 500 ms.

I have this code (based on this answer)

var z = ($('table td').find('a'));         // selection via jQuery
$("#mylink").on('click', function(event){
    event.preventDefault();
    var $this = $(this);
    for (i=0; i<z.length; i++) {    
        window.open(z[i].href, '_blank');    
    }
});

The above works, but opens all links simultaneously.

So, I have tried enclosing the window.open line into either:

setInterval(function() {        
        window.open(z[i].href, '_blank');   
}, 500);

or:

setInterval("window.open('"+z[i].href+"','_blank')", 500);

but didn't help: both did nothing, and I only get continuous TypeError: z[i] is undefined errors in Browser Console when I click the link.

For what it's worth, if the fact that it's a link is what's causing the problem,
I have also the code for creating a button, instead of a link:

var z = ($('table td').find('a'));         // selection via jQuery

var button = document.createElement("button");
button.id = 'mybutton';
button.type = "button";
button.value = "im a button";
context.appendChild(button);    

$("#mybutton").on('click', function(event){
    event.preventDefault();
    var $this = $(this);
    for (i=0; i<z.length; i++) {            
        window.open(z[i].href, '_blank');
    }
});

Changing the window.open line in either of the two ways described above doesn't help,
and I get the same errors in Browser Console.

`setInterval("window.open(z[i].href, '_blank')", 500);` fyi, you gave a string instead of a function for the 1st parameter. — Jo E., Oct 27 '15 at 01:41
Thanks for noticing that. I had this answer on my mind. So, I corrected it into `setInterval("window.open('"+z[i].href+"','_blank')", 500);` but it just waits 0.5 sec and then fires all URLs simultaneously (even if using `setTimeout`). — darkred, Oct 27 '15 at 02:34

Chris · Accepted Answer · 2015-10-27T02:46:52.773

First of all, you are using jQuery. Why not take full advantage of it? Instead of using a for loop, you could just use the $.each() method of jQuery. Also, instead of setInterval(), you should use setTimeout() for this use case. The following works for me.

var z = ($('table td').find('a'));         // selection via jQuery
$("#mylink").on('click', function(event){
    event.preventDefault();
    var $this = $(this);

    var interval = 0;   //set the starting point for the timeout interval

    z.each(function() {
        var href = $(this).attr('href');

        setTimeout(function() {
            window.open(href, '_blank');
        }, interval);

        interval += 1500;   //up the interval to ensure a delay between opening

    });
});

Side note, I hope the user is expecting this functionality, as this can be annoying. Also, most modern browsers are going to block these popups. Just my two cents.

Yes, that was exactly what I wanted. Thank you! – darkred Oct 27 '15 at 02:43 — darkred, Oct 27 '15 at 02:43

(After a click event) how to open a list of links in new tabs with a delay after each opening

1 Answers1