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>

我得到了ids

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

创建一个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);
}

这里的工作示例：

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

Answer 1

首先，你有2个循环，它们都使用i变量进行迭代，内部循环保持覆盖外部i，这样在第一次外部迭代后它最终变为{{1外部循环永远不会进入第二次迭代。

此外，您通过将6作为参数传递给Immediately-Invoked-Function-Expression来逃离关闭/范围问题，这样当您的回调运行时，它将引用正确的i，但是只有一半是因为你需要传递i变量（即引用实际的el元素）（否则，它将始终引用循环中最后指定的元素）：< / p>

<div>

请参阅Fiddle

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

Settimeout for循环

2 个答案: