Question

我正在尝试创建一个记忆一周的节目。我有代码来显示项目，但只是延迟了很长时间我希望代码在更改项目之前等待。如何在阵列中一次显示一个项目一周，然后继续下一个项目而不等待一周的延迟？这就是我现在所拥有的：

<p id="wfm"></p>

var mind = [];
var i = 0;

var wfmind = document.getElementById('wfm');
function next_verse() {

     wfmind.innerHTML = mind[i % mind.length];
     i += 1;

}
setInterval(next_verse, 1000);

Answer 1

您可以使用当前时间作为索引，该索引从1970开始计算，而不是用户进入网站的任意时间。

截至编写时，当前时间戳为1493684749486。

var d = new Date();
// +d === 1493684749486

要将当前时间戳转换为数组索引，您需要知道一周内的毫秒数（1000 * 60 * 60 * 24 * 7），然后计算自1970年以来经过的周数。

var index = Math.floor(+d / (1000*60*60*24*7));
// 2469 weeks have passed since 1970
// output `mind[index]` now.

为了这里的答案，我假设您想在星期五上午9点更换该项目。下一个最接近的星期五上午9点是1494000000000。

d.setMilliseconds(0);
d.setSeconds(0);
d.setMinutes(0);
d.setHours(9);
d.setDate(d.getDate() + (7 + 5 - d.getDay()) % 7); // How many days away is Friday from Monday? Add that to the current date.

那是315250514毫秒。你将这么长的时间设置为启动下一次更改。

当项目更改时，启动以下更改的新超时。这比setInterval更受欢迎。

function displayNextItem() {
  var d = new Date();
  var timestamp = +d;
  var index = Math.floor(timestamp / (1000*60*60*24*7));
  wfmind.innerHTML = mind[index % mind.length];

  d.setMilliseconds(0);
  d.setSeconds(0);
  d.setMinutes(0);
  d.setHours(9);
  d.setDate(d.getDate() + (7 + 5 - d.getDay()) % 7); // How many days away is Friday from Monday? Add that to the current date.

  setTimeout(displayNextItem, +d - timestamp);
}
displayNextItem();

如何每周在数组中显示一个项目

1 个答案: