javascript timer implement pause function

Question

私はこの時点までに作業していたjavascript/jqueryタイマーを持っています。これは、タイマーを開始してリセットする必要があるだけです。私は今それを一時停止するための関数を追加する必要があり、私はそうする方法について確信が持てません。

私はインターバルをクリアすることでタイマーを一時停止することができましたが、ここで私の問題がどこにあるかを再び開始するときに再開する方法を理解する必要があります。

インターバルを関数に戻してみましたが、それは役に立たないようです。

どのような考えですか？

JSフィドル：https://jsfiddle.net/3dweffy8/3/

// Define a global so we can clear it in our reset 
var interval; 

(function($) { 

    // Define our plugins vars if they were not set 
    $.fn.upCount = function(options, callback) { 
    var settings = $.extend({ 
     startTime: null, 
     offset: null, 
     reset: null, 
     resume: null 
    }, options); 

    // Save container 
    var container = this, 
     globalContainer = container.parent().html(); 

    // get the current date 
    var currentDate = function() { 
     var date = new Date(); 
     return date; 
    }; 

    // Define some global vars 
    var original_date = currentDate(); 
    var target_date = new Date('12/31/2030 12:00:00'); // Count up to this date 

    // Are we resetting our counter? 
    if (settings.reset) { 
     return reset(); 
    } 

    // Do we need to start our counter at a certain time if we left and came back? 
    if (settings.startTime) { 
     resumeTimer(newDate); 
    } 

    // Lets resume from where we paused 
    if (settings.resume) { 
     // not sure how to continue from where we paused... 
    } 

    // Are we pausing the timer? 
    if (settings.pause) { 
     return clearInterval(interval); 
    } 

    // Reset the counter by destroying the element it was bound to 
    function reset() { 
     var timerContainer = $('[name=timerContainer]'); 
     timerContainer.empty().append(globalContainer).find('.time').empty().append('00'); 
     clearInterval(interval); 
    } 

    // Given a start time, lets set the timer 
    function resumeTimer(startTime) { 
     original_date = startTime; 
    } 

    // Start the counter 
    function countUp() { 

     // Set our current date 
     var current_date = currentDate(); 

     // difference of dates 
     var difference = current_date - original_date; 

     if (current_date >= target_date) { 
     // stop timer 
     clearInterval(interval); 
     if (callback && typeof callback === 'function') callback(); 
     return; 
     } 

     // basic math variables 
     var _second = 1000, 
     _minute = _second * 60, 
     _hour = _minute * 60, 
     _day = _hour * 24; 

     // calculate dates 
     var days = Math.floor(difference/_day), 
     hours = Math.floor((difference % _day)/_hour), 
     minutes = Math.floor((difference % _hour)/_minute), 
     seconds = Math.floor((difference % _minute)/_second); 

     // fix dates so that it will show two digets 
     days = (String(days).length >= 2) ? days : '0' + days; 
     hours = (String(hours).length >= 2) ? hours : '0' + hours; 
     minutes = (String(minutes).length >= 2) ? minutes : '0' + minutes; 
     seconds = (String(seconds).length >= 2) ? seconds : '0' + seconds; 

     // based on the date change the refrence wording 
     var ref_days = (days === 1) ? 'day' : 'days', 
     ref_hours = (hours === 1) ? 'hour' : 'hours', 
     ref_minutes = (minutes === 1) ? 'minute' : 'minutes', 
     ref_seconds = (seconds === 1) ? 'second' : 'seconds'; 

     // set to DOM 
     container.find('.days').text(days); 
     container.find('.hours').text(hours); 
     container.find('.minutes').text(minutes); 
     container.find('.seconds').text(seconds); 

     container.find('.days_ref').text(ref_days); 
     container.find('.hours_ref').text(ref_hours); 
     container.find('.minutes_ref').text(ref_minutes); 
     container.find('.seconds_ref').text(ref_seconds); 

    }; 

    // start 
    interval = setInterval(countUp, 1000); 
    }; 

})(jQuery); 

Answer 1

はタイムロジックは、ここにあなたの問題の少なくともです。私たちは、タイマーが起動したときに

覚え、そして時間 からそれを差し引くと、彼らは

残り時間を取得するために、一時停止をクリックしてください：それはコメントで指摘されていたように、解決するのに非常に簡単です何らかの理由で経過時間を保存する必要があります。再起動時に合計から減算するためです。デモのためにjQuery .dataを使用しています。その後、あなたは現在の時間差を計算する際には、必ず同じ場所に戻ってそれを保存します

var elapsed_time = container.data('elapsed'); 

：あなたはoriginal_dateのようなあなたのVARSを初期化する場合は、以前に保存された値をチェックする必要があり、新たなVARを、追加

// difference of dates 
var difference = (current_date - original_date) + (elapsed_time || 0); 
container.data('elapsed', difference); 

作業フィドルを見ている：そうは言ってhttps://jsfiddle.net/3dweffy8/13/

---

を、私はあなたには、いくつかの奇妙な模様行くを持っていることを言及したいと思いますそこにいる。 jQueryプラグインのように見えますが、実際はそうではありません。それはどんな状態も保持しません。これは、この奇妙な設定を関数にマッピングしています。多分あなたはそれを単純な機能にするべきでしょう。または、プラグインのアーキテクチャに深く浸る - https://learn.jquery.com/plugins/advanced-plugin-concepts/

インスタンスを作成して、データを保存してメソッドを添付できるようにしてください。まともなプラグインの経験則として、複数のインスタンスを持つことができます。いくつかのタイマーは、ページ上で独立して動作します。

Answer 2

だけで、あなたは世界的に元の日付と現在の日付の間の差を保存することができ、あなたがresume呼び出すときに現在の日付に設定されます元の日付からグローバルな違いを減算する必要があります。

if (settings.resume) { 
    original_date.setTime(original_date.getTime() - lastDiff); 
    interval = setInterval(countUp, 1000); 
    return; 
} 

デモ：https://jsfiddle.net/o6rm1s4x/