Javascript希望有一个标签，您可以检查该标签是否自动刷新页面[重复]答案

【问题标题】：Javascript want to have a label that you can check for auto-refreshing the page [duplicate]Javascript希望有一个标签，您可以检查该标签是否自动刷新页面[重复]
【发布时间】：2020-09-10 08:51:46
【问题描述】：

我尝试制作一个标签，当您“检查”它时，它会每 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。

【问题讨论】：

在大约 99% 的情况下，您不希望整个页面自动刷新，而是获取新数据并操作现有 DOM。如今，这通常是通过将新数据推送到您的 web 应用程序的 websockets 来完成的，或者您可以通过 fetch 手动请求数据
@baao 是的，实际上听起来更好。没想到有这样的东西！我确实从 API（在实际项目中）获取产品的价格，我希望这些价格每 5 秒更新一次。我确实有它，因此您无法选择是否要自动刷新，但发现这很愚蠢，因为我的表格“搜索框”刚刚刷新。但是有办法只刷新你说的价格吗？
@KennyMeyer 啊好吧！一个问题，有没有办法询问用户每次刷新之间应该有多少秒？所以用户可以选择是 1 秒还是 27 秒等？我目前正在考虑在 HTML 中使用“选择”“选项”，可能有点硬编码吗？你有解决办法吗？

标签： javascript html css

【解决方案1】：

我认为这就是您要寻找的： Javascript Auto Refresh Toggle Checkbox

如果有帮助，请批准这个答案！

【讨论】：

嗯，我想这就是我要找的，不知道为什么我没有找到它。但是对Baao的评论有点兴趣，所以先检查一下，如果没有成功，再看看那个线程！谢谢:)

【解决方案2】：

这是一个基本示例，说明如何使用 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>

【讨论】：

好的，即使我使用的是 Python Flask，这也能工作吗？我从 API 获取值，并将值从 python 返回到 HTML（Jinja），我必须使用什么链接而不是我的 API 链接“jsonplaceholder.typicode.com/todos”？
是的，就像这个和你的 API 链接一样。然后只需选择放置新数据的 DOM 元素@SimonSjöö
试过了，但没有成功，它是一个非常大的 API，有超过 190 多种产品，价格、数量、订单等等。无法让它工作，因为我从 python 上的 API 获取值，然后将它们返回到我的 HTML (jinja)
@SimonSjöö 您将希望从烧瓶中以 json 形式返回值，而不是呈现的 html 页面；然后它工作。最简单的方法是在烧瓶中创建一个附加端点，该端点返回您传递给视图渲染器的值