愛轉角的天空

今天在新專案上寫上一個跑馬燈公告程式...因為舊式的 marquee 實在不符合效益..而且訊息也必須是即時讀取的動態公告才是..所以就用Javascript寫了一支程式..當然了, 為了可以不斷去資料庫抓取資料及重覆迴圈, 就得要用到 setTimeout的程序來運行嘍..程式原碼如下...

====================================================
var showObj = document.getElementById('HotNews');
var interspeed = 150;
var changetime = 9000;
var seq;
var newRand;
var msg = new Array("台股開盤勁揚139點 攻上9200點", "中信金：兆豐金股票四年內賣光光", "台新銀：全力推動與彰銀換股", "公營事業成功轉型　台肥鎖定藍金產業　賣水也賣保養品");
var num = msg.length;
showData();

function getRandom() {
       var ranNum= Math.floor(Math.random() * num);
       return ranNum;
}
function showData() {
    seq = 0;
    showObj.innerHtml = '';
    newRand = getRandom();
    Scroll();
    setTimeout("showData()", changetime );
}
function Scroll() {
    showObj.innerHTML = msg[newRand].substring(0, seq);
    seq++; seq++;
    setTimeout("Scroll()", interspeed );
}
====================================================

結果一運行...ㄟ..好了...沒什麼問題..但是...偶然按出工作管理員後..發現CPU佔用率居然一開始就45%...第二迴圈一開始就變成98%了...哇....而且顯示的速度也變快了...真慘...經過一番測試, 才發現似乎是setTimeout在搞鬼 查詢資料結果 嗯..似乎大家也有這些問題..而且只要把IE縮下來又正常了..但是..事情不能就這樣算了..因為如果使用者一直停在這一頁, 過了一段時間, 會因為程序不斷佔用而造成系統 crash , 所以開始了Debug之旅...首先...找到了一篇有關於setTimeout的教學...(筆者都會了..= =)..讀了其中的內容..找到了一個似乎可以解決的方法..就是 clearTimeout 的形式, 真是如獲至寶, 立刻改寫程式碼如下:

====================================================
var showObj = document.getElementById('HotNews');
var interspeed = 150;
var changetime = 9000;
var seq;
var newRand;
var nextShow;
var showing;
var msg = new Array("台股開盤勁揚139點 攻上9200點", "中信金：兆豐金股票四年內賣光光", "台新銀：全力推動與彰銀換股", "公營事業成功轉型　台肥鎖定藍金產業　賣水也賣保養品");
var num = msg.length;
showData();

function getRandom() {
       var ranNum= Math.floor(Math.random() * num);
       return ranNum;
}
function showData() {
    if (showing || nextShow) {
        clearTimeout(showing);
        clearTimeout(nextShow);
    }
    seq = 0;
    showObj.innerHtml = '';
    newRand = getRandom();
    Scroll();
    nextShow = setTimeout("showData()", changetime );
}
function Scroll() {
    showObj.innerHTML = msg[newRand].substring(0, seq);
    seq++; seq++;
    showing = setTimeout("Scroll()", interspeed );
}
====================================================

修改完再次運行, 嗯...發現顯示速度正常了, CPU佔用率也一直保持在38%...果然如筆者所猜測一樣..所以問題就解決了, 原來...程式的收尾也是很重要的, 在設計師的一念之間, 會方便到許多人的使用, 多了數行程式碼, 也將會使您的程式更加完善, 所以筆者再將本次經驗詳實記錄下來, 也可以供以後查閱嘍...cccc
最後為了要在同一頁不變換的狀態下, 重新讀取最新公告..所以加入了PHPRPC的程式碼, 把亂數取陣列資料改到server端讀取, 每次只讀回一筆最新的亂數資料即可...也可以節省在頁面reload時所再必須讀取的資料量...最後完成的程式碼為:

====================================================
var showObj = document.getElementById('HotNews');
var interspeed = 150;
var changetime = 9000;
var seq;
var msg;
var nextShow;
var showing;
var num;
showData();

function showData() {
    if (showing || nextShow) {
        clearTimeout(showing);
        clearTimeout(nextShow);
    }
    rpc.rpc_getData("news", function(msg) {
        seq = 0;
        showObj.innerHtml = '';
        Scroll();
        nextShow = setTimeout("showData()", changetime );
    });
}
function Scroll() {
    showObj.innerHTML = msg.substring(0, seq);
    seq++; seq++;
    showing = setTimeout("Scroll()", interspeed );
}
====================================================

嗯...Javascript 還有許多筆者未探知的世界...現在開始運用也不會太晚..就怕沒有開始...^^
坐而論 ---> 起而行!!