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

是的，这就是我想出来的。

＆＃13;

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];
}

＆＃13;

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

＆＃13;

我使用了setInterval，因此计时器总是通过递减seconds变量并渲染到每秒来倒计时。

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

您可以想象pages数组实际上有page1.html或任何要加载的网址，render函数可以将iframe.src设置为该网址。

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

2 个答案: