我有以下代码,正确工作时应打开iframe中的链接1,等待3秒,然后在iframe中打开链接2,等待3秒等等。
目前它正在直接跳到数组中的最后一个值(最后一个链接)。
任何JS专家?
<html>
<head></head>
<body>
<a href="http://www.google.com">Google</a><br />
<a href="http://www.thinkgeek.com">ThinkGeek</a><br />
<a href="http://www.themetapicture.com">The Meta Picture</a>
<iframe src="http://www.google.com" id="myid" name="main" width="1024" height="768">
</iframe>
<script>
function getLinksArray() {
for (var i = 0; i < document.links.length; i++) {
var linx = document.links[i].href;
// create a closure for each loop iteration
(function(linx) {
setTimeout(function() {
openLinks(linx);
}, 3000);
}(linx));
}
}
function openLinks(link) {
document.getElementById("myid").src = link;
}
window.onload = getLinksArray();
</script>
</body>
</html>
答案 0 :(得分:3)
您可能希望3000 * i
作为延迟,否则全部在3000毫秒(3秒)后执行。因为它们是连续执行的,所以最后一个是被注意到的。
// ...
setTimeout(function(){
// ...
}, 3000 * i);
// ...
答案 1 :(得分:0)
您可能只想让迭代本身定时:
function loadLink(i) {
document.getElementById("myid").src = document.links[i].href;
if (i < document.links.length) {
window.setTimeout(function() { loadLink(i+1) }, 3000);
}
}
window.onload = loadLink(0);
答案 2 :(得分:0)
我很确定这样的事情可以解决问题,而不会产生更长和更长的延迟。虽然没有性能测试,所以不能说哪个是最好的 - 只是想确保你知道另一种选择。
var linx = document.links;
(function loadLink(i) {
setTimeout(function () {
document.getElementById("myid").src = linx[i].href;
if(linx[++i])
{
loadLink(i);
}
}, 3000)
})(0);