Javascript Timer implementieren Pausenfunktion

Question

Ich habe einen Javascript/Jquery Timer, an dem ich gearbeitet habe und bis zu diesem Zeitpunkt habe ich nur benötigt, um den Timer zu starten und zurückzusetzen. Ich muss jetzt eine Funktion hinzufügen, um sie anzuhalten, und ich bin mir nicht sicher, wie ich das machen soll.

Ich war in der Lage, den Timer durch Löschen des Intervalls zu pausieren, aber jetzt muss ich herausfinden, wie es fortgesetzt wird, wenn ich wieder auf Start klicke, wo mein Problem ist.

Ich versuchte, das Intervall zurück zu der Funktion, aber das schien nicht zu helfen.

Irgendwelche Gedanken?

JS Fiddle: 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

Die Zeitlogik ist die am wenigsten hier Ihre Probleme. Es ist ganz einfach zu lösen, wie es in den Kommentaren darauf hingewiesen hatte:

Erinnern, wenn ein Timer gestartet, und es aus der Zeit subtrahiert sie klicken Pause, um die verbleibende Zeit

Wir bekommen müssen die verstrichene Zeit irgendwie speichern, um beim Neustart von der Summe zu subtrahieren. Ich werde jQuery .data zu Demonstrationszwecken verwenden. Wo Sie Ihre Vars wie original_date initialisieren, ein neues var hinzufügen, das sollte für zuvor gespeicherte Werte überprüfen:

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

Dann, wenn Sie die aktuelle Zeitdifferenz berechnen, stellen Sie sicher, dass Sie es wieder an der gleichen Stelle sparen:

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

Werfen Sie einen Blick auf die Arbeits Geige: https://jsfiddle.net/3dweffy8/13/

---

das gesagt ist, möchte ich erwähnen, dass Sie einige seltsame Muster haben gehen da drüben. Es sieht aus wie ein jQuery-Plugin, aber nicht wirklich. Es hält keinen Staat. Es hat diese seltsame Zuordnung von Einstellungen zu Funktionen. Vielleicht solltest du es einfach klar machen. Oder tauchen Sie tief in die Plugin-Architektur ein - https://learn.jquery.com/plugins/advanced-plugin-concepts/

Versuchen Sie, eine Instanz zu erstellen, damit Sie Daten speichern und Methoden anhängen können. Als Faustregel für ein ordentliches Plugin sollten Sie mehrere Instanzen haben können, in Ihrem Fall mehrere Timer, die unabhängig auf der Seite laufen.

Answer 2

einfach, können Sie die Differenz zwischen dem ursprünglichen Datum und aktuelle Datum global speichern, und wenn Sie anrufen resume müssen Sie die globale Differenz aus dem ursprünglichen Datum subtrahieren, die auf das aktuelle Datum eingestellt werden:

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

Demo:https://jsfiddle.net/o6rm1s4x/