需要帮助找出在使用setTimeout函数连续循环网页之间的剩余时间。

Question

我目前正在使用javascript的setTimeout函数来循环访问4个不同的网站，每10秒钟访问一次。我需要一个准确的方法来显示下一个网站显示之前还有多少秒的倒计时。是否有一种方法可以减去已经用于创建计时器的setTimeout函数中使用的时间？以下是我目前正在使用的Javascript代码：

<script type="text/javascript">
var pages = [
'webpage 1',
'webpage 2',
'webpage 3',
'webpage 4'
], p = pages.length;
while(--p > -1){
(function(p){
    var a = document.createElement('a');
    a.href = pages[p];
    pages[p] = a;
})(p);
}
function loadIframe() {
var page = pages[(p = ++p % pages.length)], bust = 'bustcache=' + new 
Date().getTime();
page = page.search? page.href + '&' + bust : page.href + '?' + bust;
document.getElementById('if_one').src = page;
setTimeout(loadIframe, 10000);
}
loadIframe();
</script>

- Dustin Vondross

Answer 1

虽然从setTimeout()无法直接看到它，但只需记录开始时间并进行一些数学计算即可：

const delay = 10000;
const start = Date.now(); // milliseconds
setTimeout(doSomething, delay);

// when needed
const elapsed = Date.now() - start;
const remaining = delay - elapsed; // divide by 1000 for seconds

- samanime

---

我似乎无法让这个起作用。这是 JavaScript 对吗？相应的 HTML 元素会是什么样子？ - Dustin Vondross

你只需要定期调用 setInterval() 或其他一些方法，然后设置 <div> 或其他元素的文本即可。有许多不同的方法可以做到这一点。remaining 的值在别处对我们来说只是一个数字。 - samanime

我没有任何运气，这是我应该叫它的名字吗？<div id="remaining"> </div> - Dustin Vondross

Answer 2

是的，这是我想出来的。

var pages = [
  'webpage 1',
  'webpage 2',
  'webpage 3',
  'webpage 4'
];
var seconds = 10;
var pageIndex = 0;
var el = document.querySelector('p');
var div = document.querySelector('div');
render(seconds, pageIndex);

setInterval(function() {
  seconds--;
  if (seconds === 0) {
    seconds = 10;
    pageIndex++;
    if (pageIndex > pages.length-1) { pageIndex=0 }
  }
  render(seconds, pageIndex);
}, 1000);

function render(sec, pIndex) {
  el.textContent = sec + ' seconds remain...';
  div.textContent = pages[pIndex];
}

<h1>Count down</h1>

<p>Please wait...</p>
<div style="border: 1px solid #ccc; padding:20px">Page</div>

我使用了setInterval函数，以便计时器始终通过递减seconds变量并在每秒渲染来倒计时。

如果10秒间隔已经达到0，我们将计时器重置为10并增加页面索引。

您可以想象pages数组实际上具有要加载的page1.html或其他URL的render函数可以将iframe.src设置为该URL。

- styfle

---

计时器工作得很好，但它在0处停止。是否有可能让它以与网页更改速度相同的速度刷新并再次倒数从10到0？ - Dustin Vondross

@DustinVondross 我更新了我的答案。如果这个回答解决了你的问题，请考虑点赞或接受为正确答案。 - styfle

我不得不回到setTimeout来处理网页循环，因为我需要它在四个网页之间持续循环。当我使用setTimeout进行网页循环和您的setInterval进行计时器时，几乎完美匹配，但大约一个小时后就会有一秒钟的偏差。想象一下这个时间会继续增长。 - Dustin Vondross

setTimeout 不适用于精确计时。请参考这个问题中的一些实现精确计时的想法。 - styfle

谢谢，但我没有看到示例？ - Dustin Vondross

如果不必要，我就不需要使用setTimeout，只是还没有找到在不同网站之间连续循环的方法。有什么建议吗？ - Dustin Vondross