JS:setTimeout函数的UI计数

JS: UI countown for setTimeout function

本文关键字：UI 计数 函数 setTimeout JS      更新时间：2023-09-26

我有一个每5秒运行reloadData()函数的页面：

setTimeout('reloadData()', 5000);

我有一个元素，我想为reloadData（）的每一秒更新一个从5到0的倒计时；

document.getElementById('countdown').value

达到这种效果的正确方法是什么？

示例：

  • reloadData() {}启动
  • 元素"countdown"将显示：5…4…3。。。2…1…（以秒为间隔）
  • reloadData(){}再次启动

我不完全确定如何解释您的问题，但我猜您有一个函数reloadData，应该每5秒运行一次。

现在，您将看到一个计数器，该计数器将从每秒5..1开始计算。

当计数器达到0时，您想重复，例如调用reloadData()并再次计数？

var counter = 0;
setInterval(function() {
  if (counter == 0) {
    reloadData();
  }
  // do stuff with i which will be 0, 1, 2, 3, 4, 0, 1, 2, 3, 4
  // ...
  document.getElementById('countdown').value = 5 - counter;
  // ...
  counter++;
  counter %= 5;
}, 1000);

更像是6秒，因为我在重新加载时会暂停一段时间，但您可以使用requestAnimationFrame调用您的函数（大约每秒60次），并检查日期以查看是否超过一秒。然后更新您的计数器。

如本例所示：

https://jsfiddle.net/subterrane/k2aacj4s/

输出div:

<div class="container" id="counter"></div>

某些脚本：

var counter = document.querySelector("#counter");
var count = 5;
var start = Date.now();
function work() {
  if (count == 0) {
    counter.innerText = "reload!";
  } else {
    counter.innerText = count;
  }
  var now = Date.now();
  if (now >= start + 1000) {
    start = now;
    count--;
    if(count < 0) count = 5;
  }
  window.requestAnimationFrame(work);
};
work();
相关文章：