SetInterval will not work here as I need it to be date/time bound. I want the functions to be called on a certain date then alternate every 2 weeks regardless of page refresh.
Precision isn't so important so it doesn't matter if the user's clock is used.
let div1 = document.querySelector(".div1");
let div2 = document.querySelector(".div2");
let div3 = document.querySelector(".div3");
let div4 = document.querySelector(".div4");
function function1() {
div1.style.display = "block";
div2.style.display = "none";
div3.style.display = "none";
div4.style.display = "none";
}
function function2() {
div1.style.display = "none";
div2.style.display = "block";
div3.style.display = "none";
div4.style.display = "none";
}
function function3() {
div1.style.display = "none";
div2.style.display = "none";
div3.style.display = "block";
div4.style.display = "none";
}
function function4() {
div1.style.display = "none";
div2.style.display = "none";
div3.style.display = "none";
div4.style.display = "block";
}
<div class="div1"> 1 </div>
<div class="div2"> 2 </div>
<div class="div3"> 3 </div>
<div class="div4"> 4 </div>
I know you said you don't want to use setInterval, but it's needed here if you want to do this without libraries. Fortunately, I have a feeling you meant setInterval with 14 days as the interval, and that's not necessary. Here's what I would do (sorry I can't really test it before answering because that would require about a month):
const startDate = new Date(x); //x is just whenever you want to start this: if you
//don't want to use a backend with a database, you'll need to hardcode this in the javascript
window.setInterval(()=>{
let date = new Date();
let twoWeeks = 1.2096e+9 //2 weeks in milliseconds
switch (Math.floor(((date - startDate)/twoWeeks)%4)) {
//difference between the dates, divide it by the twoWeeks number to get how many of
//that interval have passed, get the remainder from dividing by 4 in case more than
//8 weeks have passed, then floor it to get an integer
case 1:
function1();
break;
case 2:
function2();
break;
case 3:
function3();
break;
case 0: //will happen if it's happened 4 times or 0
function4();
break;
}
}, y); //y is any interval in milliseconds, shorter will be more precise but will use more memory
if you want to prevent it from doing function4() before the first 2 week interval passes, you could update the function like so:
window.setInterval(()=>{
let date = new Date();
let twoWeeks = 1.2096e+9;
if ((date - startDate)/twoWeeks < 4) return;
switch (Math.floor(((date - startDate)/twoWeeks)%4)) {
case 1:
function1();
break;
case 2:
function2();
break;
case 3:
function3();
break;
case 0:
function4();
break;
}
}, y);
Note, this will have the functions be called more than once within that interval, but considering it's just setting which div will be visible, that won't be a problem.
One way of solving this is by using cron.
The docs in that link explain it well but essentially you can set a date and time and pass in the function you'd want to call based on the given date/time params
var CronJob = require('cron').CronJob;
var job = new CronJob('* * * * * *', function() {
console.log('You will see this message every second');
}, null, true, 'America/Los_Angeles');
job.start();