javascript - 设置特定时间循环

Question

Stackoverflow 社区。

我对编码比较陌生，JS 很特别，我目前正在为一家广播电台做一个项目。我正在编写 JS 来根据当前正在播出的主持人更改横幅图像。为了成功，我需要每小时整点(上午 9 点或下午 4 点)和每半小时(4:30 或 13:30)运行我的脚本，无论用户何时加载页面。

这是我当前使用的代码

[JS 截图][1] : /image/WgvnX.jpg

我第一次调用该函数，然后我希望它设置一个超时，以便在接下来的半小时间隔内再次运行自己，然后继续循环，直到用户关闭浏览器。

感谢您提前的答复

Answer 1

这是一个非常简单的实现。

编辑:这是与时区有关的，但我不能 100% 确定它能正常工作。时区可能很棘手。

<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"/>

<小时/>

尚未包含时区；你在哪个时区？有一些工作可以解决这个问题。

(我现在在 Kent Brockman，布鲁塞尔时间 14:00:00；但想必您有其他时区的客户...)

<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"/>