Question

这是我的HTML：

<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <title>Something</title>
 </head>
 <body>
   <a href="http://www.google.com">Try Me!</a>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
   <script>
$("a").click(function(event){
  for(id=0;id<=10;id++){
    setTimeout(function() {
      var local_id = id;
      window.open("http://www.mysite.com/characterID="+local_id,"", "win"+local_id, "width=100,height=100,resizable");
      }, 3000*id);
   }
   event.preventDefault();
});

   </script>
 </body>
 </html>

此链接在下一个窗口后3秒打开每个窗口。

这是我需要的行：http://www.mysite.com/characterID=1, http://www.mysite.com/characterID=2, http://www.mysite.com/characterID=3...

但它始终会打开http://www.mysite.com/characterID=11

我该如何解决？

谢谢...

Answer 1

这是一个常见问题。

您在循环中覆盖local_id，并且在代码运行时始终引用相同的变量。这是因为JavaScript 没有块范围，只是函数范围。

因此，为了调整id的范围，您需要调用一个函数，并在那里定义变量（或函数参数）。

function createWindow(local_id) {
    setTimeout(function () {
        window.open("http://www.mysite.com/characterID=" + local_id, "", "win" + local_id, "width=100,height=100,resizable");
    }, 3000 * local_id);
}

for (id = 0; id <= 10; id++) {
    createWindow(id);
}

或者类似的模式是让函数将函数返回到循环。

function createWindow(local_id) {
    return function() {
        window.open("http://www.mysite.com/characterID=" + local_id, "", "win" + local_id, "width=100,height=100,resizable");
    };
}

for (id = 0; id <= 10; id++) {
    setTimeout( createWindow(id) , 3000 * id);
}

Answer 2

这是因为当id设置为11时循环退出后调用var local_id = id;。

试试这个：

for(id=0;id<=10;id++){
   setTimeout('window.open("http://www.mysite.com/characterID='+id+'","win'+id+'","width=100,height=100,resizable")', 3000*id);
}

Answer 3

这是一个典型的JavaScript闭包问题。匿名函数使用值id，它在循环结束时设置为11。要解决此问题，您需要创建一个返回函数的函数（将在id值附近关闭）。

尝试如下：

$("a").click(function(event) {
    var timeout = function(local_id){
        return function(){
            window.open("http://www.mysite.com/characterID=" + local_id, "", "win" + local_id, "width=100,height=100,resizable");
        };
    };
    for (id = 0; id <= 10; id++) {
        setTimeout(timeout(id), 3000 * id);
    }
    event.preventDefault();
});

Answer 4

您可以将id作为附加参数传递给setTimeout，如下所示:(这实际上是@mrk的答案，而且不那么邪恶。）

setTimeout(function(local_id) {
  window.open("http://www.mysite.com/characterID="+local_id,"", "win"+local_id, "width=100,height=100,resizable");
  }, 3000*id, id);

Answer 5

多年后，我想回答我自己的问题。我无法记住我尝试做什么，但我的解决方案应该使用let而不是var。 let是范围限制而var不是。

for(id=0;id<=10;id++){
    let local_id = id;    
    setTimeout(function() {
          console.log(local_id)
    }, 3000);
}

Javascript：连续打开窗口问题

5 个答案: