如何使用 JavaScript 自动更新网站上的天气数据 (JSON)？答案

【问题标题】：How to automatically update weather data (JSON) on a website using JavaScript?如何使用 JavaScript 自动更新网站上的天气数据 (JSON)？
【发布时间】：2019-08-01 19:53:48
【问题描述】：

您好，我正在尝试创建一个向您显示当前天气的网站（目前在 3 个城市）。我的问题是，当开关处于 ON 位置时，我不知道如何才能只更新 JSON 数据。（所以我不想在间隔后重新加载页面我只想在一段时间后自动更新温度等。）

这是网站的图片：

这是我的实现。似乎无法弄清楚这一点，因为在我看来这应该可以工作：D 一直盯着这个太久了。

JavaScript

function setup() {
  var dropinput = document.getElementById("city-dropdown");
  var value = dropinput.options[dropinput.selectedIndex].value;
  var url = api + value + units + apiKey;
  fetch(url).then(
    function(response) {
    if (response.status !== 200) {
      console.log('Looks like there was a problem. Status Code: ' +
      response.status);
      return;
    }
    response.json().then(function(data) {
      document.getElementById("temp").innerHTML = 'Temperature: ' + data.main.temp + ' Celsius'
      document.getElementById("wind").innerHTML = 'Wind: ' + data.wind.speed + ' m/s'
      document.getElementById("humidity").innerHTML = 'Humidity: ' + data.main.humidity + '%'
    });
    }
  )

}

var interval = null;

function autoupdate() {
  var checkBox = document.getElementById("switch");
  if (checkBox.checked == true) {
    interval = setInterval(setup(), 1000);
  } else {
    clearInterval(interval);
  }
}

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="slideshow.js"></script>
</head>
<body onload="setup()">
<div class="container">

  <h1>Check the weather!</h1>
  <fieldset>
    <form action="/" method="post">
      <select name="city" id="city-dropdown">
          <option value="Helsinki">Helsinki</option>
          <option value="Turku">Turku</option>
          <option value="Kuusamo">Kuusamo</option>
      </select>
      <button class="nappi" type="button" onclick="setup()">Get weather</button>
    </form>
  </fieldset>
  <p id="temp">Temperature: </p>
  <p id="wind">Wind: </p>
  <p id="humidity">Humidity: </p>

</div>

<div class="update">
    <p id="autoupdate">Auto-update:</p>
    <label class="switch">
      <input type="checkbox" id="switch" onclick="autoupdate()">
      <span class="slider round"></span>
    </label>
  </div>
  </body>
  </html>

【问题讨论】：

@YevgenGorbunkov 他们已经在获取数据了。这根本没有帮助。
2 件事。首先，删除setup 之后的括号interval = setInterval(setup, 1000); 这将传递对函数的引用，而不是执行它的结果。其次，不要使用间隔。调用完成时使用超时并创建另一个超时，这样您就不会最终重叠调用时间超过您的时间间隔。
setInterval(setup(), 1000); 应该是setInterval(setup, 1000); 你试图重复运行setup 的返回值，但该函数没有返回函数。
@Archer 太棒了，谢谢！不过我不需要更改 setInterval。
@MatiasBerglund 想想如果服务器开始响应时间超过一秒会发生什么。另外，问问自己使用setInterval 而不是setTimeout 是否有什么好处。我将始终建议使用setTimeout 进行重复的 API 调用。

标签： javascript html json setinterval weather-api

【解决方案1】：

你需要这样做：

setInterval(function(){setup()}, 1000);

【讨论】：

或者只是setInterval(setup, 1000);，这要短得多。完全没有必要将函数包装在这样的函数中。 setup 完全可以单独调用。