0

我遇到了 setTimeout 的问题。我也试过 setInterval。我希望 JS 只是暂停或睡觉。

理论上，这段代码应该写入数组中的第一个链接，等待 3 秒，然后写入下一个，依此类推。但它甚至不会调用该函数。

<html>
<head></head>
<body>

<a href="http://www.google.com">Google</a>
<a href="http://www.thinkgeek.com">ThinkGeek</a>
<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;
    setTimeout("openLinks(linx)"),3000);
}
}

function openLinks(link){
document.write(link + "<br />");
}

window.onload = getLinksArray();
</script>
</body>
</html>

我问题的第二部分是将 iframe 的 src 更改为链接（而不是编写它们）。我只是将document.write用于测试目的以使延迟起作用。

我试过document.getElementById("myid").src = link;了，它根本不会做任何事情。几乎就好像 iframe 甚至不存在一样。

我不是专业人士，所以我在这里希望得到专业人士的帮助。;） 提前致谢。

4

3 回答 3

0

您遇到问题主要是因为您不能那样打电话setTimeout。

您应该传递一个函数，该函数需要传递一个绑定变量，即

for (var i=0; i < document.links.length; i++) {
    var linx = document.links[i].href;
    setTimeout(function(linx) {
        return function() {
            openlinks(linx);
        }
    }(linx),3000);
}

内部的东西是将循环变量传递给回调的“标准”Javascript方法之一。如果它没有意义，你将需要更多的帮助......

于 2013-02-05T19:44:14.263 回答
0

首先，永远不要将字符串传递给setTimeout.

// old and busted
setTimeout("openLinks(linx)"),3000);

// new hotness
setTimeout(function() {
  openLinks(linx)
}, 3000);

其次，生成函数的循环需要一些额外的帮助。您需要在闭包中捕获循环的值，否则该值将在使用它的函数执行之前更改。

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.write(link + "<br />");

    // document.write is also bad for a number of reasons
    someElement.innerHTML += link + "<br />"
}

window.onload = getLinksArray();

闭包魔术所做的是创建全新的局部变量，仅与循环的每次迭代中创建的函数共享。没有它，你实际上有一些看起来更像这样的东西：

var linx; // var linx in the loop actually get hoisted to outside the loop!
for(var i=0; i < document.links.length; i++){
    linx = document.links[i].href;
    setTimeout(function() {
      openLinks(linx)
    },3000);
  }
}

看着它，您可以看到循环将完成运行，linx将设置该循环的最后一个值，然后您的第一个超时将使用linx所有超时共享的值触发。

创建和执行一个函数，传入该值可以防止提升和共享。

于 2013-02-05T19:45:57.320 回答
0

感谢大家的帮助，我有一个最终的工作产品：

<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;
 (function loadLink(i) {          
   setTimeout(function () {   
    document.getElementById("myid").src = linx[i].href;
    if(linx[++i])
    {
        loadLink(i);
    }
}, 20000)
})(0);

}
}

window.onload = getLinksArray();
</script>
</body>
</html>
于 2013-02-05T22:51:53.253 回答