0

Stackoverflow community.

I am relatively new to coding and JS is particular and I am currently working on a project for a radio station. I am writing JS to change the banner images according to the presenter currently on air. For this to be successful I need to run my script every hour on the hour(9 am or 4 pm) and every half hour(4:30 or 13:30) regardless of when the user loads the page.

Here is the code im currently using

[Snipping of JS][1] : https://i.stack.imgur.com/WgvnX.jpg

I have a calling the function the first time, then I want it to set a Timeout to run itself again at the next half hour interval and then keep looping until the user close their browser.

Thank you for your answers in advance

J Herselman
  • 3
  • 1
  • https://stackoverflow.com/questions/26306090/running-a-function-everyday-midnight, https://stackoverflow.com/questions/4455282/call-a-javascript-function-at-a-specific-time-of-day, https://stackoverflow.com/questions/11741979/run-code-once-a-day, https://stackoverflow.com/questions/11901074/javascript-call-a-function-after-specific-time-period – Morpheus Jul 19 '17 at 10:47
  • just to be clear, you don't need to run any script every half hour, the client does. Your script must provide an array of reporters with a time next to each one (like a tv guide) . Then a setTimeout of the client browser just reads from the array which reporter is on – Emmanuel Delay Jul 19 '17 at 10:58
  • @EmmanuelDelay the snipped you see is a function that calls a function to see what day of the week it is. that function then calls a function to see what the time of the day is and relays the correct images to display in the browser. Hope that cleared it up? – J Herselman Jul 19 '17 at 11:17
  • @Morpheus Hi there, I am not trying to run a function once a day at a spicific time. I am trying to run a function in a permanent loop with 30min intervals falling in on the hour. I have seen those questions and the answers but they could not help me/I did not understand how they could help me. As I said I am relatively new to JS – J Herselman Jul 19 '17 at 11:22
  • Use `setinterval` as in the last link attached. – Morpheus Jul 19 '17 at 12:04

3 Answers3

1

This is a quite simple implementation.

EDIT: this is with timezone, but I'm not 100% sure it works as it should. Timezones can be tricky.

<script>
var currentIndex = 0;    // global var.  If the reporter index is different than this, the change will be triggered.

var serverTimezone = -4  // New York Timezone.  notice DST.  In Winter time this should be -5.

// all on New York Time
var reporters = [
  {name: 'Tintin',        time: '2017-07-19 08:00:00', url: 'http://photos1.blogger.com/img/28/3438/320/Tintin.jpg'},
  {name: 'Kent Brockman', time: '2017-07-19 09:00:00', url: 'https://static.simpsonswiki.com/images/thumb/1/16/Kent_Brockman.png/250px-Kent_Brockman.png'},
  {name: 'Clark Kent',    time: '2017-07-19 11:00:00', url: 'https://i.ytimg.com/vi/9HbXdHu3NaI/hqdefault.jpg'},
  {name: 'Peter Parker',  time: '2017-07-19 13:00:00', url: 'http://sotd.us/justingabrie/peterparker/Module08/images/peterparker.jpg'}
];

function getReporter() {
  var index = 0;
  var now = new Date();
  var clientTimezone = -1 * now.getTimezoneOffset() / 60;   // this returns (in Summer time) example: for Brussels: 2 , NYC: -4, ...
  var timezoneOffset = serverTimezone - clientTimezone;
  for(var i=0; i< reporters.length; i++) {
    var reporter_time = parseDatetimeString(reporters[i].time, timezoneOffset);
    if(now >= reporter_time) {
      index = i;
    }
  }
  if(currentIndex != index) {
    changeReporter(index);
  }
}

function changeReporter(index) {
  currentIndex = index;
  document.getElementById('banner').src =   reporters[index].url;
}

function parseDatetimeString(s, timezoneOffset) {
  if(! timezoneOffset) {
    timezoneOffset = 0;
  }
  var bits = s.split(/\D/);
  return new Date(bits[0], --bits[1], bits[2], Number(bits[3]) - timezoneOffset, bits[4], bits[5]);
}

window.onload = function() {
  getReporter();
  // check every 20 sec, feel free to change this value, 
  // it isn't harmful to the client so set it even smaller 
  setInterval(getReporter, 20000);
}
</script>
<img id="banner"/>

Timezones are not included yet; Which timezone are you on? There is some work to handle this.

(I'm on Kent Brockman now, 14:00:00h on Brussels time; but presumably you have clients in other timezones...)

<script>
var currentIndex = 0;   // global var.  If the reporter index is different than this, the change will be triggered.
var reporters = [
  {name: 'Tintin',        time: '2017-07-19 13:00:00', url: 'http://photos1.blogger.com/img/28/3438/320/Tintin.jpg'},
  {name: 'Kent Brockman', time: '2017-07-19 14:00:00', url: 'https://static.simpsonswiki.com/images/thumb/1/16/Kent_Brockman.png/250px-Kent_Brockman.png'},
  {name: 'Clark Kent',    time: '2017-07-19 15:00:00', url: 'https://i.ytimg.com/vi/9HbXdHu3NaI/hqdefault.jpg'},
  {name: 'Peter Parker',  time: '2017-07-19 16:00:00', url: 'http://sotd.us/justingabrie/peterparker/Module08/images/peterparker.jpg'}
];

function getReporter() {
  var index = 0;
  var now = new Date();
  for(var i=0; i< reporters.length; i++) {
    var reporter_time = parseDatetimeString(reporters[i].time);
    if(now >= reporter_time) {
      index = i;
    }
  }
  if(currentIndex != index) {
    changeReporter(index);
  }
}

function changeReporter(index) {
  currentIndex = index;
  document.getElementById('banner').src =   reporters[index].url;
}

function parseDatetimeString(s) {
  var bits = s.split(/\D/);
  return new Date(bits[0], --bits[1], bits[2], bits[3], bits[4]);
}

window.onload = function() {
  getReporter();
  // check every 20 sec, feel free to change this value, 
  // it isn't harmful to the client to set it even smaller 
  setInterval(getReporter, 20000);
}
</script>
<img id="banner"/>
Emmanuel Delay
  • 3,619
  • 1
  • 11
  • 17
  • I am on GMT + 2. I do not know which time zone the server is on just yet. – J Herselman Jul 19 '17 at 13:41
  • The script without timezone should work just fine in Western Europe, Brussels time (not in the UK). As long as the time in the array corresponds with GMT+2 time. If you have friends around the world, put a test website somewhere, ask them to test the other script – Emmanuel Delay Jul 19 '17 at 14:16
0
nextDate = new Date();
bVal = d.getMinutes() > 30
d.setHours(d.getHours() + 1 * bVal,30 ? bVal : 0)

This should set your time to be the correct value

Tomos Williams
  • 1,988
  • 1
  • 13
  • 20
  • 1
    Thanks Tomos, just one thing. Do I have to change my code at all or only add that line? I will test and update if it works – J Herselman Jul 19 '17 at 11:18
  • 1
    Tomos it would appear that your code works beautifully, but it has revealed a new problem. I will add an answer to show my new problem while I work on a solution. – J Herselman Jul 19 '17 at 11:38
  • @JHerselman can't see the new problem just yet, comment here when you add it and what you've tried to fix it and I'll try to help where I can – Tomos Williams Jul 19 '17 at 14:25
  • 1
    @everyone Thanks so much for your answers. I have found a solution to the problem and it is working on the site for a couple of months now. – J Herselman Mar 13 '18 at 09:20
0

It would appear if the following code runs, so if the time is greater than 30 min past, it sets the timeout as 1 hour later instead of the next round hour. in other words, it is currently 1:42 pm and it has set the timeout to fire at 2:30 pm.

[New Problem] : https://i.stack.imgur.com/iAUnY.jpg

J Herselman
  • 3
  • 1