How To Add Delay To HTML Javascript Function

Question

I have the following script that opens urls in a list:

function openWindow(){
    var x = document.getElementById('a').value.split('\n');
    for (var i = 0; i < x.length; i++)
        if (x[i].indexOf('.') > 0)
            if (x[i].indexOf('://') < 0)
                window.open('http://'+x[i]);
            else
                window.open(x[i]);
}

However, I would like to add a delay (let's say about 5 seconds) between opening each url. How can I do this?

I'm not familiar with functions. Usually much better with Linux and such. Your insight is highly appreciated.

Answer 1

A better approach is to use setTimeout() along with a self-executing anonymous function:

function openWindow() {
    var i = 0;
    var x = document.getElementById('a').value.split('\n');
    (function() {
        if(typeof x[i] !== 'undefined') {
            if(x[i].indexOf('.') > 0) {
                if(x[i].indexOf('://') < 0) {
                    window.open('http://' + x[i++]);
                } else {
                    window.open(x[i++]);
                }
            }
            setTimeout(arguments.callee, 1000);
        }
        return false;
    })();
}

This will guarantee that the next call is not made before your code was executed. I used arguments.callee in this example as a function reference. Once the index no longer exists in the array, by checking if it's undefined, it simply returns false instead of setting another timout.

Answer 2

You can do it like this, to avoid issues caused by setTimeout being non-blocking.

What you need is to wait for the setTimeout to be executed before starting the next iteration.

var i = 0;
function openWindow(){
    var x = document.getElementById('a').value.split('\n');
    doLoop(x);
}


function doLoop(x)
    setTimeout(function () {
        if (x[i].indexOf('.') > 0){
            if (x[i].indexOf('://') < 0){
                window.open('http://'+x[i]);
            }else{
                window.open(x[i]);
            }
        }
        i+=1;
        if(i<x.length){
            doLoop(x);
        }
    }, 5000)
}

Using a self executing function, it'd go like this :

function openWindow() {
    var i = 0;
    var x = document.getElementById('a').value.split('\n');
    (function fn() {
        if(x[i].indexOf('.') > 0) {
            if(x[i].indexOf('://') < 0) {
                window.open('http://' + x[i++]);
            } else {
                window.open(x[i++]);
            }
        }
        i++;
        if( i < x.length ){
            setTimeout( fn, 3000 );
        }
    })();
}

Answer 3

create array x with all url's

var x = [url1, url2, url3, ...];

create a for loop

for(var i = 0; i<x.length; i++) {
   setTimeout(function() {
    window.open('http://'+x[i])}, 1000); // 1000 for 1 second 
 }
}

Answer 4

 setInterval(function(){window.open('http://'+x[i]);},5000);