设置特定于时间的循环

时间:2017-07-19 10:35:51

标签: javascript loops datetime

Stackoverflow社区。

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

以下是我目前使用的代码

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

我第一次调用该函数,然后我希望它设置一个Timeout以在下一个半小时间隔再次运行自身,然后继续循环直到用户关闭他们的浏览器。

提前感谢您的回答

3 个答案:

答案 0 :(得分: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"/>

尚未包括时区;你在哪个时区?有一些工作要处理这个问题。

(我现在是布鲁克曼,现在是布鲁塞尔时间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"/>

答案 1 :(得分:0)

nextDate = new Date();
bVal = d.getMinutes() > 30
d.setHours(d.getHours() + 1 * bVal,30 ? bVal : 0)

这应该将您的时间设置为正确的值

答案 2 :(得分:0)

如果以下代码运行,则会出现,因此如果时间超过30分钟,则将超时设置为1小时后而不是下一轮时间。 换句话说,它目前是下午1点42分,它已将超时设置为下午2:30开火。

[新问题]:https://i.stack.imgur.com/iAUnY.jpg