タイマーを一時停止および再開するにはどうすればよいですか？

ボタンをクリックするたびにこの形式のタイマーを00:00:00に開始するこの関数があります。しかし、私は機能の再開と一時停止の仕方を知らない。私は役に立つと思った抜粋を見つけましたが、私はそれらの作業をすることができませんでした。私はjsでオブジェクトを使うのが初めてです。タイマーを一時停止および再開するにはどうすればよいですか？

function clock() { 
    var pauseObj = new Object(); 

    var totalSeconds = 0; 
    var delay = setInterval(setTime, 1000); 

    function setTime() { 
    var ctr; 
    $(".icon-play").each(function() { 
     if ($(this).parent().hasClass('hide')) ctr = ($(this).attr('id')).split('_'); 
    }); 

    ++totalSeconds; 
    $("#hour_" + ctr[1]).text(pad(Math.floor(totalSeconds/3600))); 
    $("#min_" + ctr[1]).text(pad(Math.floor((totalSeconds/60) % 60))); 
    $("#sec_" + ctr[1]).text(pad(parseInt(totalSeconds % 60))); 
    } 
}

パッドは、（）だけsetInterval()を使用して設定された繰り返しアクションをキャンセルするwindow.clearIntervalを使用して先頭のゼロに

出典

2012-09-19 esandrkwn

クロックオブジェクトを作成する方が良いと思います。コードを参照してください（：http://jsfiddle.net/f9X6J/デモを参照してください）：

var Clock = { 
    totalSeconds: 0, 

    start: function() { 
    var self = this; 

    this.interval = setInterval(function() { 
     self.totalSeconds += 1; 

     $("#hour").text(Math.floor(self.totalSeconds/3600)); 
     $("#min").text(Math.floor(self.totalSeconds/60 % 60)); 
     $("#sec").text(parseInt(self.totalSeconds % 60)); 
    }, 1000); 
    }, 

    pause: function() { 
    clearInterval(this.interval); 
    delete this.interval; 
    }, 

    resume: function() { 
    if (!this.interval) this.start(); 
    } 
}; 

Clock.start(); 

$('#pauseButton').click(function() { Clock.pause(); }); 
$('#resumeButton').click(function() { Clock.resume(); });

出典

2012-09-19 01:42:26

ありがとう@Speransky。このアプローチでは、ボタンのonclickを一時停止または再開するにはどうすればよいですか？ – esandrkwn

もう一度ありがとうございます。私はこれを私のために働かせました。 – esandrkwn

私は自己の使用を理解することができません...これはdiffの場所では異なる意味を持っています...私は少し混乱しています..あなたは説明してください。私はこれとは別のアプローチをしていますhttp://jsfiddle.net/wMJuQ/ –

を追加します。

clearInterval(delay);

出典

2012-09-19 01:28:00 xdazz

がどのようにのsetTime（以降、それを再起動します）機能クロックの内側にありますか（）？ – HeatfanJohn

@HeatfanJohn 'pause'の意味によりますが、表示を一時停止してタイマーを継続させ、' clearInterval'を使わない場合は、HTMLコンテンツの表示を更新するだけで済みます。 – xdazz

totalSecondsが増分されないため、間隔をクリアするだけでは機能しません。クロックが一時停止しているかどうかを判断するフラグを設定します。

このフラグは、単にpause（）を呼び出したとき、またはresume（）を解除したときに設定されます。私はtotal秒増分を一時停止したときでも（常に再開した時間を記録できるように）、実行中の 'tick'タイムアウトに分割しました。

したがって、クロック機能が一時停止していない場合、ティック機能は時刻を更新するだけです。

function clock() 
{ 
    var pauseObj = new Object(); 

    var totalSeconds = 0; 
    var isPaused = false; 
    var delay = setInterval(tick, 1000); 

    function pause() 
    { 
     isPaused = true; 
    } 

    function resume() 
    { 
     isPaused = false; 
    } 

    function setTime() 
    { 
     var ctr; 
     $(".icon-play").each(function(){ 
      if($(this).parent().hasClass('hide')) 
       ctr = ($(this).attr('id')).split('_'); 
     }); 

     $("#hour_" + ctr[1]).text(pad(Math.floor(totalSeconds/3600))); 
     $("#min_" + ctr[1]).text(pad(Math.floor((totalSeconds/60)%60))); 
     $("#sec_" + ctr[1]).text(pad(parseInt(totalSeconds%60))); 
    } 

    function tick() 
    { 
     ++totalSeconds; 

     if (!isPaused) 
      setTime(); 
    } 
}

出典

2012-09-19 01:32:15 dcasadevall

ありがとうございますすぐにこれを試してみます – esandrkwn

<html> 
    <head><title>Timer</title> 
    <script> 

    //Evaluate the expression at the specified interval using setInterval() 
    var a = setInterval(function(){disp()},1000); 

    //Write the display() for timer 
    function disp() 
    { 
     var x = new Date(); 

     //locale is used to return the Date object as string 
     x= x.toLocaleTimeString(); 

     //Get the element by ID in disp() 
     document.getElementById("x").innerHTML=x; 
    } 
    function stop() 
    { 
     //clearInterval() is used to pause the timer 
     clearInterval(a); 
    } 
    function start() 
    {  
     //setInterval() is used to resume the timer 
     a=setInterval(function(){disp()},1000); 
    } 

    </script> 
    </head> 
    <body> 
    <p id = "x"></p> 
    <button onclick = "stop()"> Pause </button> 
    <button onclick = "start()"> Resume </button> 
    </body> 
    </html>

出典

2016-03-16 17:05:04 VRN

コードにいくつかのコメントを追加してください – kvorobiev

タイマーを一時停止および再開するにはどうすればよいですか？

答えて

関連する問題