Mit JavaScript ein Intervall erstellen, das deine Skripte aufruft.

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:

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 reached

Mit 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.