今天在寫一個亂數跳號的抽籤器，原本以為挺簡單
按下按紐後間隔200ms連續產生亂數，然後改變中籤的顏色
沒想到怎麼做都做不出來，後來發現javascript是一種單執行緒的語言
所以原本我的邏輯是 迴圈 {按下按鈕->等200ms->亂數換色}
產生結果卻是 等n次200ms，最後換色(因為ui會取最後的結果顯示)
有寫過java的ui應該都清楚，背後邏輯在運作的時候要改變UI狀態
就必須要另外拉一條thread同時做，這樣才可以同時計算邏輯與改變UI
因此javascript的function就必須要使用?完整執行完整個邏輯同時包含改變UI?
也就是查詢後必須用setTimeout去重複執行自己，而不能function中等待n秒再重複執行某動作
程式碼如下
var flag = 0;
function start(total)
{
var i = Math.floor((Math.random() * total));
for(var j = 0;j < total;j++)
$("#" + j).css('background-color','white');
$("#" + i).css('background-color','yellow');
if(flag %2 == 1)
setTimeout("start("+total+")", 30); <---重複執行自己
else
{$("#button").attr("disabled",true);}
}
最後加個停止的條件判斷，就可以成功達成任務了
按下按紐後間隔200ms連續產生亂數，然後改變中籤的顏色
沒想到怎麼做都做不出來，後來發現javascript是一種單執行緒的語言
所以原本我的邏輯是 迴圈 {按下按鈕->等200ms->亂數換色}
產生結果卻是 等n次200ms，最後換色(因為ui會取最後的結果顯示)
有寫過java的ui應該都清楚，背後邏輯在運作的時候要改變UI狀態
就必須要另外拉一條thread同時做，這樣才可以同時計算邏輯與改變UI
因此javascript的function就必須要使用?完整執行完整個邏輯同時包含改變UI?
也就是查詢後必須用setTimeout去重複執行自己，而不能function中等待n秒再重複執行某動作
程式碼如下
var flag = 0;
function start(total)
{
var i = Math.floor((Math.random() * total));
for(var j = 0;j < total;j++)
$("#" + j).css('background-color','white');
$("#" + i).css('background-color','yellow');
if(flag %2 == 1)
setTimeout("start("+total+")", 30); <---重複執行自己
else
{$("#button").attr("disabled",true);}
}
最後加個停止的條件判斷，就可以成功達成任務了