Mit JavaScript ein Intervall erstellen, das deine Skripte aufruft.
Marc Wagner
November 10, 2020
Du möchtest Inhalte deiner Webseite erst zu einem gewissen Zeitpunkt einblenden? Dann kannst du das schnell und unkompliziert mit JavaScript realisieren.
Der finale Code #
Falls du ein erfahrener Webentwickler bist und keine langen Erklärungen benötigst, habe ich hier direkt den kompletten Code:
"use strict";
window['checktimer'] = function(date, intervalTime, onSuccess, onUpdate){
let TimerInterval = null;
let endDate = new Date(date);
let calls = 0;
TimerInterval = setInterval(function(){
calls++;
var startDate = new Date();
var seconds = (endDate.getTime() - startDate.getTime()) / 1000;
if(seconds <= 0){
if(typeof(onSuccess) !== "undefined") {
onSuccess(calls);
}
clearInterval(TimerInterval);
}else{
if(typeof(onUpdate) !== "undefined") {
onUpdate(calls);
}
}
}, intervalTime);
}Passend dazu hier der Aufruf der Funktion damit du direkt loslegen kannst:
window.checktimer("2020-11-10 10:50:00", 1000, function(calls){
# Called as soon as the Timestamp is reached
}, function(calls){
# Called whenever an Update has processed.
} );Für alle anderen angehenden Webentwickler folgt jetzt eine kurze Erklärung. Du kannst übrigens hier einen Code finden der in PHP zwei Datumsangaben vergleicht.
Die Erklärung zum JavaScript Code #
Zunächst erstellen wir eine Funktion, die global gültig ist, in dem wir diese im Geltungsbereich des Fensters definieren.
window['checktimer'] = function(date, intervalTime, onSuccess, onUpdate){}Die Funktion soll dabei vier Parameter entgegennehmen die wir benötigen, um etwas Flexibilität zu ermöglichen:
| date | Das Datum im Format YYYY-MM-DD HH:ii:ss zB.: “2020–11–10 10:50:00” |
| intervalTime | Die Millisekunden wie häufig das Datum geprüft wird. |
| onSuccess | Eine Callback Funktion die aufgerufen wird, wenn das gewünschte Datum erreicht wurde. |
| onUpdate | Eine Callback Funktion die aufgerufen wird, wenn das Datum geprüft wurde. |
Direkt am Anfang deklarieren wir dann unsere Werte, die nur für die Funktion selbst gebraucht werden, aber die von außen nicht verändert werden sollen.
let TimerInterval = null; // store the interval object
let endDate = new Date(date); // store the date object
let calls = 0; // calls done till the date is reachedMit den Werten erstellen wir anschließend das Intervall, um in regelmäßigen Abständen zu prüfen, ob das Zieldatum erreicht wurde.
TimerInterval = setInterval(function(){
calls++;
var startDate = new Date();
var seconds = (endDate.getTime() - startDate.getTime()) / 1000;
if(seconds <= 0){
if(typeof(onSuccess) !== "undefined") {
onSuccess(calls);
}
clearInterval(TimerInterval);
}else{
if(typeof(onUpdate) !== "undefined") {
onUpdate(calls);
}
}
}, intervalTime);Sobald das der Fall ist, wechseln die Sekunden von einer positiven Ganzzahl ins negative, weswegen wir das Intervall beenden und die definierte “onSuccess” Callback Funktion aufrufen können.
Fazit #
Das Berechnen der Differenz zwischen zwei Datumsangaben in Sekunden ist mit JavaScript leicht möglich. Durch das Auslagern der Funktion und der Übergabe von Callback Funktionen lässt sich ein sauberer, wieder verwendbarer Code erstellen der auf jeder beliebigen Webseite und Webanwendung eingebaut werden kann.
Ich hoffe, der Beitrag hilft dir bei deinem Projekt. Falls du Fragen hast oder Feedback geben möchtest, kannst du gerne einen Kommentar hinterlassen.
Artikel von:
Marc Wagner
Hallo, Marc hier. Ich bin der Gründer von Forge12 Interactive und bereits seit über 20 Jahren leidenschaftlich dabei Webseiten, Onlineshops, Anwendungen und SaaS-Lösungen für Unternehmen zu entwickeln. Vor der Gründung habe ich bereits in Börsen notierten Unternehmen gearbeitet und mir allerlei Wissen angeeignet. Dieses Wissen möchte ich nun an meine Kunden weitergeben.
