Javascript - Problems with Loop with Array

Question

I have the following code that when working correctly should open link 1 in the iframe, wait 3 seconds, then open link 2 in the iframe, wait 3 seconds, etc..

Currently it's skipping straight to the last value in the array (the last link).

Any JS expert takers?

 <html>
 <head></head>
 <body>

 <a href="http://www.google.com">Google</a><br />
 <a href="http://www.thinkgeek.com">ThinkGeek</a><br />
 <a href="http://www.themetapicture.com">The Meta Picture</a>

 <iframe src="http://www.google.com" id="myid" name="main" width="1024" height="768">
 </iframe>

 <script>
 function getLinksArray() {
     for (var i = 0; i < document.links.length; i++) {
         var linx = document.links[i].href;

         // create a closure for each loop iteration
         (function(linx) {
           setTimeout(function() {
             openLinks(linx);
           }, 3000);
         }(linx));

     }
 }

 function openLinks(link) {
 document.getElementById("myid").src = link;
 }

 window.onload = getLinksArray();
 </script>
 </body>
 </html>

The loop will create the timeouts super quick so the first one will wait 3 seconds only to have the 3rd be milliseconds behind. Open links should create the next timeout. — dennmat
– dennmat, Commented Feb 5, 2013 at 21:49
All of your events would go off in three seconds — multiply 3000 by the current iteration count. — Waleed Khan
– Waleed Khan, Commented Feb 5, 2013 at 21:49

Brad Christie · Accepted Answer · 2013-02-05 21:49:29Z

3

You probably want 3000 * i as your delay, otherwise all execute after 3000ms (3 seconds). and since they're executed serially, the last one is the one that's noticed.

// ...
setTimeout(function(){
  // ...
}, 3000 * i);
// ...

answered Feb 5, 2013 at 21:49

Brad Christie

102k16 gold badges160 silver badges200 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MDEV · Accepted Answer · 2013-02-05 22:08:37Z

0

I'm pretty sure something like this should do the trick, without creating longer and longer delays. Haven't performance tested both though, so can't say which is best - just wanted to make sure you were aware of another option.

var linx = document.links;
(function loadLink(i) {          
    setTimeout(function () {   
        document.getElementById("myid").src = linx[i].href;
        if(linx[++i])
        {
            loadLink(i);
        }
    }, 3000)
})(0);

answered Feb 5, 2013 at 22:08

MDEV

10.9k2 gold badges35 silver badges50 bronze badges

1 Comment

MDEV Over a year ago

Haha, got so distracted while writing my answer someone else posted a very similar one before me.. ah well, still a different approach!

Ted Hopp · Accepted Answer · 2013-02-05 21:56:45Z

0

You might want to simply make the iteration itself timed:

function loadLink(i) {
    document.getElementById("myid").src = document.links[i].href;
    if (i < document.links.length) {
        window.setTimeout(function() { loadLink(i+1) }, 3000);
    }
}

window.onload = loadLink(0);

answered Feb 5, 2013 at 21:56

Ted Hopp

235k48 gold badges413 silver badges533 bronze badges

Collectives™ on Stack Overflow

Javascript - Problems with Loop with Array

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related