Re: [問題] Javascript從函式裡使用setTimeout

看板Ajax作者sk1765 (鼎玉鉉)時間14年前 (2011/09/14 15:50)推噓0(0推 0噓 1→)

留言1則, 1人參與討論串2/2 (看更多)

※ 引述《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