Javascript 设置循环超时

我已经写了一个脚本，让身体的顶部距离一个div，我有4个div

我想设定一个暂停时间，每5秒计算一次高度

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

创建了一个for循环-似乎不能每5秒获取一个高度，只返回0

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

此处的工作示例：

---

为什么这么复杂？？不需要映射到ID，然后找到ID为什么不简单地将元素保留在数组中？还可以将setTimeout和IIFE合并为一个：

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

---

首先，有两个循环都在使用i变量进行迭代，而内部循环一直覆盖外部i，因此在第一次外部迭代之后，它最终为6，而外部循环永远不会到达第二次迭代

此外，您还通过将i作为参数传递给，从而避免了闭包/作用域问题，这样当您的回调运行时，它将引用正确的i，但这只是一半，因为您还需要传递引用实际元素的el变量，否则，它将始终引用循环中最后分配的元素：

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

---

请参见

单击并在此处发布代码，您应该可以，但仍然返回0，而不是每个的顶部高度div@user1177860由于这不是您在问题中提供的代码，因此我无法帮助您…GetTversepel应返回84168321264，返回0我已对脚本进行了更新

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