前陣子我分享了關於JS效能調校的經驗,IE8 Dev Tool是個很方便的工具。不過,不是每種瀏覽器上都有Profiler可用,若想在不同瀏覽器上都能精確地量測某段操作的時間長短,寫一個Javascript版的Stopwatch計時碼錶應是最直接有效的方法。所以我寫了一個JS計時碼錶---darkStopWatch:

//Declare a stopWatch "class"
function darkStopWatch(timerName) {
    this.timerName = timerName;
    this.timerSt = new Date();
    this.resultQueue = [];
    this.tag = "Test";
}
darkStopWatch.prototype = {
    start: function(tag) {
        this.tag = tag;
        this.timerSt = new Date();
    },
    stop: function() {
        var ts = new Date() - this.timerSt;
        this.resultQueue.push(this.tag + " -> " + ts + "ms");
    },
    getRecord: function(clear) {
        var s = this.resultQueue.join("\n");
        if (clear) this.clear();
        return "StopWatch [" + this.timerName + 
               "]\n====================\n" + s;
    },
    reset: function() {
        this.resultQueue = [];
    }
}

使用方法還蠻簡單的,利用new darkStopWatch("碼錶標籤")宣告物件,用start(“計時標籤")開始計時、stop()停止計時,darkStopWatch會將start()到stop()的時間記錄為該"計時標籤"的時間長度,並可反覆多次start()/stop(),最後則是用getRecord()取回所有計時結果。

以下的範例有三段,第一段是計算你按下alert確認鈕的時間長度、第二段是連續五次計時,每次長度為1秒,第三段則是示範一次可以使用多個碼錶。Check it out!

//Usage
var sw = new darkStopWatch("Alert Delay");
sw.start();
alert("請等待幾秒鐘再按下確定");
sw.stop();
alert(sw.getRecord());
 
//Use setTimeout go test the measure unit
function measure() {
    var sw = new darkStopWatch("歸零射擊");
    sw.start("Test 1");
    var count = 1;
    var hnd = setInterval(
        function() {
            sw.stop();
            if (count < 5) {
                count++;
                sw.start("Test " + count);
            }
            else {
                clearInterval(hnd);
                alert(sw.getRecord());
            }
        },
    1000);
    //Demo 2, multiple stopwatches
    window.swAry = [];
    for (var i = 1; i <= 5; i++) {
        swAry[i] = new darkStopWatch("Swatch " + i);
        swAry[i].start("Wait for " + i + " sec");
        setTimeout("swAry[" + i + "].stop()", i * 1000);
    }
    setTimeout(function() {
        for (var i = 1; i <= 5; i++)
            alert(swAry[i].getRecord());
    }, 6000);
}
measure();
        

Comments

# by evakey

標題應該是拼錯了,Javascri "p" t ?

# by Jeffrey

to evakey, 是的, 超愛打錯字的我又再度展現什麼字都可以打錯的實力... orz 謝謝指正。 前幾天在寫Javascript, 就打出了paserFloat, parsFloat, parserFloat, 一個函數可以打字打錯三次,Debug時間光用來抓錯字就不夠了。 看來,強型別的C#比較適合我這個Typo King。

# by Ark

嘿嘿 var ArkStopWatch = function() { return { timerName: arguments[0] || "", timerSt: null, resultQueue: [], tag: "Test", start: function() { this.tag = arguments[0] || this.tag; this.timerSt = new Date(); }, stop: function() { this.resultQueue.push((this.timerSt) ? this.tag + " -> " + (new Date() - this.timerSt) + "ms" : "never start"); }, reset: function() { this.resultQueue = [], this.timerSt = new Date(); }, getRecord: function() { var s = this.resultQueue.join("\n"); if (arguments[0]) this.reset(); return "StopWatch [" + this.timerName + "]\n====================\n" + s; } }; } 省掉 new 有哪邊可以詳細解釋 要new不new ,要prototype 或直接function methods..... 知道怎麼用但是不知所以然 好像便秘一星期(忘記自己需要大便) ~終於到廁所給拉出來 望著那坨不知道吃下啥才產生的排泄物 卻連想到javascript的這種弱型別 瀏覽器跨不過去還給你卡到陰

Post a comment