Settimeout for循环

Question

我已经编写了一个脚本来获取到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>

我得到身份证

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

创建了一个for循环-似乎无法每5秒获取每个高度仅返回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);
}

这里的工作示例：

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

Answer 1

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

另外，您通过将i作为参数传递给Instantly-Invoked-Function-Expression从而避免了闭包/作用域问题，以便在您的回调运行时它将引用正确的i ，但这只是一半，因为您需要传递el变量（引用实际的<div>元素）也是如此（否则，它将始终引用循环中最后分配的元素）：

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

见小提琴

Answer 2

为什么这么复杂？ 无需映射到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);
}