作者sk1765 (鼎玉铉)
看板Ajax
标题Re: [问题] Javascript从函式里使用setTimeout
时间Wed Sep 14 15:50:54 2011
※ 引述《Zingo (zingo)》之铭言：
: 我要做一个网页程式，网页在一载入时就会有四个数字一直在跑，
: 按一下submit停止，再按一下继续跑。
: 程式码如下：
: <html>
: <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
: <table>
: <tr>
: <td></td><td></td><td></td><td></td>
: </tr>
: </table>
: <form method="post" action="javascript: loopit(stop++)">
: <input type="submit">
: </form>
: <script language=javascript>
: var stop=0;
: loopit(stop);
: function loopit(x) {
: if (x%2==0) {
: GiveMeNumber();
: setTimeout("loopit(x);",10);
: }
: }
: function GiveMeNumber() {
: var tableCells = document.getElementsByTagName("TD");
: for (j = 0; j < 4; j++) {
: var randomnumber=Math.floor(Math.random()*10);
: tableCells[j].childNodes[0].nodeValue = randomnumber;
: }
: }
: </script>
: </html>
: 上面的程式码载入之後，setTimeout会失效，应该说不会发挥效用，
: 可能是问题症结。
: 我猜是setTimeout里的函式无法引用loopit函式的x变数，是这样吗？
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<table>
<tr>
<td></td><td></td><td></td><td></td>
</tr>
</table>
<form method="post" action="javascript:
(++stop %2 == 0) ? loopit(stop) : clearTimeout(xtimer);"> >>>C
<input type="submit">
</form>
<script language=javascript>
var xtimer;
var stop=0;
loopit(stop);
function loopit(x) {
//alert(stop);
if (x%2==0) {
GiveMeNumber();
//setTimeout("loopit(x);",10); <<<这里错 A
xtimer = setTimeout(function() {
loopit(x);
},10);
}
}
function GiveMeNumber() {
var tableCells = document.getElementsByTagName("TD");
for (j = 0; j < 4; j++) {
var randomnumber=Math.floor(Math.random()*10);
//tableCells[j].childNodes[0].nodeValue = randomnumber; <<<这里错B
tableCells[j].innerHTML = randomnumber;
}
}
</script>
</html>
A.
setTimeout("loopit(x);",10); 是不能用的
"loopit(x);"是一个字串 字串是在宣告时期被评估的 当时 x未定义
必须要用closure
function loopit(x) {
//alert(stop);
if (x%2==0) {
GiveMeNumber();
xtimer = setTimeout(function() {
loopit(x);
},10);
}
}
写成closure 因为x是在执行时期评估 所以会得到正确值
B.
tableCells[j].childNodes[0].nodeValue = randomnumber;
tableCells[j]虽然得到<TD> element 但是当时TD内没有任何节点也没有文字结点
所以childNodes[0]是null
必须写成
tableCells[j].innerHTML = randomnumber;
C.
<form method="post" action="javascript:loopit(stop++);">
form action="javascript: xxx" 的写法可以用 但是你要做的是去
清掉timer 而不是再次执行loopit
所以要改成
<form method="post" action="javascript:
(++stop %2 == 0) ? loopit(stop) : clearTimeout(xtimer);">
以下是可以跑的程式连结
http://jsfiddle.net/gbkML/
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 175.182.110.4
1F：→ Zingo:谢谢，获益良多。 09/14 15:59