HOME | javascript | jquery 重複修改CSS、value(更動畫面)

jquery 重複修改CSS、value(更動畫面)

2015/04/27/16:36 , Post in javascript , 評論(0) , 引用(0) , 閱讀(1153) , Via 本站原創
今天在寫一個亂數跳號的抽籤器,原本以為挺簡單

按下按紐後間隔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);}
}


最後加個停止的條件判斷,就可以成功達成任務了

發表評論

暱稱

網址

電郵

開啟HTML 開啟UBB 開啟表情 隱藏 記住我 [登入] [註冊]