作者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