Settimeout for loop

Question

I have written a script to get the top distance of the body to a div, I have 4 divs.

I'd like to set a time out and get each height every 5 seconds.

<div class="printOutputs" id="print1"></div>
<div class="printOutputs" id="print2"></div>
<div class="printOutputs" id="print3"></div>
<div class="printOutputs" id="print4"></div>

I get the ids

var ids = Array.prototype.slice.call(document.querySelectorAll('.printOutputs')).map(function (element) {
  return element.id;
});

Created a for loop - can't seem to get each height every 5 seconds just returns 0s

for (var i=0;i<= ids.length;i++) {
    var limit = ids.length;
    var el = document.getElementById(ids[i]);
   (function(x) {
       setTimeout(function(){
           console.log(getTopPos(el));
           if(x === limit){
               console.log('It was the last one');
           }
       }, 1000 + (3000 * x));
   })(i);
}

Working example here:

https://jsfiddle.net/zidski/nLr9o1x2/

You should [look at this](http://stackoverflow.com/questions/111102/how-do-javascript-closures-work) — Matt Burland, May 11 '17 at 16:36

score 0 · Accepted Answer · answered May 11 '17 at 16:48

First, you have 2 loops that are both using the i variable for the iteration and the inner loop keeps overriding the outer i so that after the first outer iteration it ends up being 6 and the outer loop never gets to the second iteration.

Also, you escaped from the closure/scope problem by passing i as an argument to an Immediately-Invoked-Function-Expression so that when your callback runs it will refer to the correct i, but that was only half way because you need to pass the el variable (that is referencing the actual <div> element) as well (otherwise, it will always refer to the last-assigned element in the loop):

for (var j = 0; j <= limit; j++) {
    (function(x, el) {
        setTimeout(function() {
            console.log(getTopPos(el));
        }, 1000 + (3000 * x));
    })(i, el);
}

See Fiddle

I've made an update to the script https://jsfiddle.net/zidski/nLr9o1x2/26/ — user1177860, May 15 '17 at 14:10

score -1 · Answer 2 · answered May 11 '17 at 16:43

-1

Why so complicated?? No need to map to the ids, and then find the ids ( why not simply keep the elements in the array?), also you can join the setTimeout and the IIFE into one:

var ids = document.querySelectorAll('.printOutputs');
for (var i=0;i<= ids.length;i++) {
   setTimeout(function(x){//all in one...
       var el = ids[i];
       console.log(getTopPos(el));
       if(x === ids.length-1){
           console.log('It was the last one');
       }
   }, 1000 + (3000 * i),i);
}

answered May 11 '17 at 16:43

Jonas Wilms

132,000
20
149
151

ok cool, but still returns 0s, not returning the top height of each div – user1177860 May 11 '17 at 16:47
@user1177860 as this isnt code youve provided in the question, i cannot help you with that... – Jonas Wilms May 11 '17 at 16:48
getTopPos(el) should return 8, 416, 832, 1264, returns 0s – user1177860 May 11 '17 at 16:49

Settimeout for loop

2 Answers2