不关注数组长度条件的无限循环
Posted
技术标签:
【中文标题】不关注数组长度条件的无限循环【英文标题】：Infinite For Loop that is not paying attention to array-length condition 【发布时间】：2014-06-08 16:42:27 【问题描述】：HTML 示例
<html>
<img src="http://img3.wikia.nocookie.net/__cb20130606164012/animalcrossing/images/3/30/Monkey.jpg" ><br />
<img src="http://i.telegraph.co.uk/multimedia/archive/02101/monkeys_2101340c.jpg" ><br />
<img src="http://www.awallpapersonline.com/wp-content/uploads/2014/03/Baby-monkeys-pictures-5-419x400.jpg" ><br />
<p id="sliderImages"><p>
</html>
我的 Javascript 看起来像
var monkey = document.getElementsByTagName("img");
var paragraph = document.getElementById('thisPar');
paragraph.innerHTML += '<img src="' + monkey[0].src +'" >';
效果很好。但是当我把它放在一个看起来像的循环中
var monkey = document.getElementsByTagName("img");
var paragraph = document.getElementById('thisPar');
for(var i = 0; i < monkey.length; i++)
paragraph.innerHTML += '<img src="' + monkey[i].src +'" >';
它打印出我所有的猴子图片的无限循环。我认为通过使条件取决于数组“monkey”中的元素数量（或页面上的 img 标签数量），我将能够在 ' thisPar' 段落 ID。
为什么这个语句会造成无限循环？
【问题讨论】：
每添加一个带有innerHTML 的元素，monkey.length 的长度就会增加......所以它会一直持续下去。正如 Notulysses 所建议的那样，为添加到 innerHTML 时不会更改的长度创建一个固定变量。另一种写法是for (var i = 0, len = monkey.length; i < len; i++)
【参考方案1】：
仅当在原始图像集之后插入新的 img 时才有效：定义一个变量并将其分配给循环外的 monkey 长度属性以使其固定：
var monkeyLength = monkey.length;
for(var i = 0; i < monkeyLength; i++)
paragraph.innerHTML += '<img src="' + monkey[i].src +'" >';
【讨论】：
哈。我实际上只是尝试过它，它工作得很好。 @Notulysses：仅当新的img 插入在原始图像集之后才有效。该系列仍然有效。【参考方案2】：
document.getElementsByTagName 返回一个 live HTMLCollection。由于您要添加更多 img 标记，因此您将在每个循环中将集合扩展一个元素。
如果您在循环中添加console.log(monkey.length)，您会发现问题。
最好的解决方案是这样做：
var monkey = document.querySelectorAll("img");
而不是getElementsByTagName。 querySelectorAll 将返回一个静态列表。
这是一个小提琴，它将向您显示每个循环中monkey.length 的长度。我已经确认了，所以你可以通过点击取消来打破：
http://jsfiddle.net/K266Q/
这是使用querySelectorAll的固定版本：
http://jsfiddle.net/K266Q/1/
在循环外复制长度也可以，但前提是项目保持相同的顺序。这就是为什么简单地复制长度就能抓住你的原因：
http://jsfiddle.net/K266Q/2/
请注意，因为在这种情况下，我在开头而不是结尾插入新图像，所以我最终会复制相同的图像 3 次。
【讨论】：
【参考方案3】：在 For 循环之外定义长度时，效果很好。
var LENGTH = img.length;
for(var i=0; i < LENGTH; i++)
monkeyPara.innerHTML += '<img src="' + img[i].src + '" >';
【讨论】：
【参考方案4】：我认为你的猴子长度每个循环都会增加一个，因为你正在创建一个新的 img 标签，每个循环都会增加一个猴子的长度
【讨论】：
以上是关于不关注数组长度条件的无限循环的主要内容，如果未能解决你的问题，请参考以下文章