这是我的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
我该如何解决?
谢谢...
最佳答案
这是一个普遍的问题。
您正在循环中覆盖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);
}