Settimeout für Schleife

Question

Ich habe ein Skript geschrieben, um die obere Distanz des Körpers zu einem Div zu bekommen, ich habe 4 divs.

Ich möchte eine Auszeit festlegen und jede Höhe alle 5 Sekunden erhalten.

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

ich die Ide

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

eine for-Schleife Erstellt - nicht jeder Höhe nur alle 5 Sekunden scheinen, gibt 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); 
} 

Arbeitsbeispiel hier:

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

Answer 1

Zuerst müssen Sie 2 Schleifen, die beide die Variable i für die Iteration und die innere Schleife verwenden, überschreiben das äußere i so, dass es nach der ersten äußeren Iteration 6 ist und die äußere Schleife niemals zur zweiten Iteration gelangt.

Auch entkommen Sie von der Schließung/scope Problem durch i als Argument für ein Immediately-Invoked-Function-Expression vorbei, so dass, wenn der Rückruf läuft es auf die richtigen i beziehen, aber das war nur zur Hälfte, weil Sie die el passieren müssen Variable als auch (das ist die eigentliche <div> Element Referenzierung) (sonst wird es zu dem zuletzt zugewiesene Element in der Schleife beziehen sich immer):

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

Siehe Fiddle

Answer 2

Warum so kompliziert? Keine Notwendigkeit, die IDs abzubilden, und dann die IDs finden (warum nicht einfach die Elemente in der Anordnung halten?), Können Sie auch die setTimeout und die IIFE in einer beitreten:

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); 
}