Using JavaScript, create an interval that calls your scripts.

You want to show con­tent on your web­site only at a cer­tain point in time? Then you can do this quick­ly and easi­ly with Java­Script.

The final code #

If you are an expe­ri­en­ced web deve­lo­per and don’t need long expl­ana­ti­ons, I have the com­ple­te code right here:

"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);
}

Appro­pria­te­ly, here is the call to the func­tion so you can get star­ted right away:

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.
} );

For all other bud­ding web deve­lo­pers, here is a short expl­ana­ti­on. By the way, you can find a code that com­pa­res two dates in PHP here.

The explanation of the JavaScript code #

First, we crea­te a func­tion that is glo­bal­ly valid by defi­ning it in the scope of the win­dow.

window['checktimer'] = function(date, intervalTime, onSuccess, onUpdate){}

The func­tion should take four para­me­ters that we need to allow some fle­xi­bi­li­ty:

Right at the begin­ning we decla­re our values, which are only nee­ded for the func­tion its­elf, but which should not be chan­ged from the out­side.

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

We then use the values to crea­te the inter­val to check at regu­lar inter­vals whe­ther the tar­get date has been rea­ched.

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);

As soon as this is the case, the seconds chan­ge from a posi­ti­ve inte­ger to a nega­ti­ve one, which is why we can ter­mi­na­te the inter­val and call the defi­ned “onSuc­cess” call­back func­tion.

Summary #

Cal­cu­la­ting the dif­fe­rence bet­ween two dates in seconds is easi­ly done with Java­Script. By off­loa­ding the func­tion and pas­sing in call­back func­tions, you can crea­te clean, reusable code that can be built into any web page or web appli­ca­ti­on.

I hope this post helps you with your pro­ject. If you have any ques­ti­ons or feed­back, feel free to lea­ve a com­ment.