0

開発中のColdFusionアプリケーションには、開始、一時停止、およびクリアできるタイマーが必要です。私の問題は、IE9、Firefox、Opera、Chrome、Safariでは完全に正常に機能しますが、IE8（ユーザーベースの大部分）では機能しないことです。問題は、クリックしてタイマーを停止しようとすると、タイマーが停止するのではなく、速度が上がることです。IE8でのみ実行されます（他のブラウザーは正常に動作します）。

-時計コード-

function check_timer() {
    if($('#timer').hasClass('start')) {
        $('#timer').val("Stop Timer");
        timer = setInterval ( "increaseCounter()", 1000 );
        $('#timer').removeClass('start')
    }
    else {
        if(typeof timer != "undefined") {
            clearInterval(timer); 
        }

        $('#timer').val("Start Timer");
        $('#timer').addClass('start')
    }
}

function increaseCounter() {
    var secVal;
    var minVal;
    secVal = parseInt($('#counterSec').html(),10) 
    minVal = parseInt($('#counterMin').html(),10)
    if(secVal != 59) {
        secVal = secVal + 1;
        if(secVal < 10) {
            secVal = secVal.toString();
            secVal = "0" + secVal;
        }
        $('#counterSec').html(secVal);
    }
    else {
        if(minVal != 59){
            minVal = minVal + 1;
            if(minVal < 10) {
                minVal = minVal.toString();
                minVal = "0" + minVal;
            }
            $('#counterMin').html(minVal); 
        }
        else {
            $('#counterHour').html((parseInt($('#counterHour').html(),10)+1));
            $('#counterMin').html("00");
        }
        $('#counterSec').html("00");
    }
}

-時計を含むDIV-

<div class="supportClock" style="width:150px; border-radius:20px;" align="center">
            <span id="addZeroHour"></span>
            <span id="counterHour">00</span>
            :<span id="addZeroMin"></span>
            <span id="counterMin">00</span>
            :<span id="addZeroSec"></span>
            <span id="counterSec">00</span>
        </div>

-時計をアクティブにするボタン-

<input type="button" id="timer" class="start" value="Start Timer" onclick="check_timer()">
4

2 に答える 2

3

これをスクリプトの先頭（関数の外）に追加します。

var timer;

そうしないと、このブランチに遭遇することはありません。

if(typeof timer != "undefined")

理由：IDが「timer」の要素があります。timer提案された変更なしで使用してアクセスでき、timerが「undefined」タイプになることはありません。

または、timeout-variableに別の名前を使用するだけです。

于 2012-11-19T21:57:52.457 に答える
1

こちらをご覧ください：http：//jsfiddle.net/qEATW/3/

  1. たとえば、間隔を1秒に設定しても、呼び出し間の間隔は必ずしも1秒であるとは限りません。
  2. タイムアウトと間隔については、文字列ではなく、常に関数を渡します。setInterval(increaseCounter, 1000)
  3. DOMから値を解析する理由はありません。そうすることは信じられないほど非効率的です。代わりに日付の差を使用する場合は、1つの変数（開始時刻）を格納するだけで、その時刻からの時間/分/秒を取得できます。ビューは何度でも更新でき、常に正確になります。
  4. 私は個人的に、間隔ではなく「再帰的な」タイムアウトを好みます。間隔を使用すると、停止するときに間隔をクリアするために、常にその追加の手順を実行する必要があります。タイムアウトループはいくつかの異なる方法で停止でき、何が起こっているのかを理解しやすくなる傾向があります。タイムアウトにより、呼び出し間の時間を柔軟に変更することもできます（ここでは関係ありません）。
  5. イベントハンドラーを（HTML要素上で）インラインでバインドすることは悪い習慣と見なされます。すでにjQueryを使用している場合、jQueryによってプロセスが非常に単純になるため、これに対する言い訳はありません。
  6. 私はあなたが持っていた「addZero」スパンを取り除きました。あなたがそれらで何をしていたかはわかりませんが、それらは必要ではなく、マークアップを乱雑にするためだけに役立ちました。

HTML：

<div class="supportClock" style="width:150px; border-radius:20px;" align="center">
    <span id="counterHour">00</span>
    : <span id="counterMin">00</span>
    : <span id="counterSec">00</span>
</div>
<input type="button" id="timer" class="start" value="Start Timer">

JS：

(function(){
    var clock = $(".supportClock"),
        hr = $("#counterHour"),
        min = $("#counterMin"),
        sec = $("#counterSec"),       
        running = false,
        startTime,
        timeout;

    function updateClock(){
        var time = (new Date()) - startTime,
            hrs = Math.floor(time / 1000 / 60 / 60),
            mins = Math.floor(time / 1000 / 60 - hrs * 60),
            secs = Math.floor(time / 1000 - mins * 60 - hrs * 60 * 60);

        hr.text(hrs > 9 ? hrs : '0' + hrs);
        min.text(mins > 9 ? mins: '0' + mins);
        sec.text(secs > 9 ? secs : '0' + secs);

        timeout = setTimeout(updateClock, 1000/2);
    }

    $("#timer").click(function(){
        if (!running){
            running = true;
            this.value = "Stop Timer";
            startTime = new Date();
            updateClock();
        }
        else{
            running = false;
            this.value = "Start Timer";
            clearTimeout(timeout);
        }
    });
})();
于 2012-11-19T22:15:27.797 に答える