时间戳

首页 > 解决方案 > Javascript 希望有一个标签，您可以检查该标签是否自动刷新页面

javascript - Javascript 希望有一个标签，您可以检查该标签是否自动刷新页面

问题描述

我试图制作一个标签，当你“检查”它时，它会每 5 秒自动刷新一次页面。我找到了一些线程，但没有让它工作！到目前为止，我是这样做的：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <label>
      <input
        type="checkbox"
        name="refresh"
        autocomplete="off"
        value="autorefreshoff"
        id="refresh-btn"
        onclick="refresh()"
      />
    </label>
  </body>
  <script>
    //Don't know what do do here, tried this:
    function refresh() {
      window.location.reload(1);
    }
  </script>
</html>

我猜我必须在我的javascript代码中创建一个延迟循环？因此，每当“检查”这个标签时，它会每 5 秒循环一次 JavaScript 代码，如果我关闭标签，它就会停止循环。

不幸的是，不太了解javascript。

标签： javascripthtmlcss

解决方案

这是一个基本示例，说明如何使用 fetch 每秒加载数据，然后更新 DOM。您需要根据自己的需要进行调整。

setInterval(fetchNewData, 1000);
fetchNewData();
function fetchNewData() {
fetch('https://jsonplaceholder.typicode.com/todos/' + Math.floor(Math.random() * 10) + 1)
  .then(r => r.json())
  .then(r => document.getElementById('foo').innerHTML = `User title: ${r.title}`);

}
<div id="foo">
  
</div>

推荐阅读