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

Question

我目前正在使用 javascript setTimeout 函数每 10 秒连续循环访问相同的 4 个不同网站。我需要一种准确的方法来显示在显示下一个网站之前还剩多少秒的倒数计时器。有没有办法减去已经用于创建计时器的 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>

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

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.

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

Need help finding the time left on a setTimeout function being used to continuously loop between webpages

javascript

iframe

timer

settimeout

countdowntimer