getElementbyId 导致浏览器崩溃答案

【问题标题】：getElementbyId causing browser to crashgetElementbyId 导致浏览器崩溃
【发布时间】：2014-04-13 09:37:59
【问题描述】：

我正在为我的班级开展一个项目，该项目要求我每 5 秒更改一次横幅图像，持续时间未指定。我正在使用 setInterval 来执行此操作，但我认为这会导致我的功能出现问题。 30sec-1min 后浏览器崩溃。

HTML

<body onload="startImgLoop();">
    <img id="banner" alt="Banner Image" />
</body>

JavaScript

function startImgLoop()
{           
    var img = document.getElementById("banner");
    img.src = pictures[index];

    setInterval(startImgLoop, 5000);

    if (index == 5)
        index = 0;
    else index++;
}

当浏览器崩溃时，它会询问我是否要停止脚本，并且它会指向我正在使用 getElementById 的循环的第一行。有人可以帮忙解释一下为什么会这样吗？

【问题讨论】：

您似乎使用了setInterval 而不是setTimeout。

标签： javascript html

【解决方案1】：

每次间隔运行时，您都会设置一个新间隔。这将耗尽计时器资源并使浏览器忙于为它们提供服务。

你可以改成这样：

var index = 0;
setInterval(function() {
    var img = document.getElementById("banner");
    img.src = pictures[++index % pictures.length];
}, 5000);

【讨论】：

有更好的方法吗？
设置src时获取余数的目的是什么？
@RandomlyKnighted - 获取剩余部分替换了您为防止索引变高而拥有的四行代码。这是一种反复迭代数组的常见设计模式，因为它总是生成一个在数组范围内的值，并且 ++index 保证它每次上升一个，直到余数回零，其中然后它再次开始增加。一种方便的技巧。
我必须保留一个 sn-p 以供将来参考。谢谢！

【解决方案2】：

function startImgLoop()
{           
setInterval(goLoop, 5000);
}

function goLoop()
{           
var img = document.getElementById("banner");
img.src = pictures[index];


if (index == 5)
    index = 0;
else index++;
}

试试这个，我不测试它。你应该使用 setInterval 来调用函数，而不是放在函数内部

【讨论】：