Как автоматически обновлять данные о погоде (JSON) на веб-сайте с помощью JavaScript?
Привет, я пытаюсь создать веб-сайт, который показывает текущую погоду (пока в 3 городах). Моя проблема в том, что я не знаю, как я могу обновить только данные JSON, когда переключатель находится в положении ON. (Поэтому я не хочу перезагружать страницу после интервала, я просто хочу автоматически обновлять температуру и т. д. через определенный период времени.)
Вот моя реализация. Кажется, я не могу понять это, так как, на мой взгляд, это должно работать: 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.info('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>
2 вещи. Во-первых, уберите скобки после setup здесь interval = setInterval(setup, 1000); Это будет ссылка на функцию, а не на результат ее выполнения. Во-вторых, не используйте интервал. Используйте тайм-аут и создайте еще один, когда вызов завершится, чтобы избежать перекрывающихся вызовов, которые занимают больше времени, чем ваш интервал.
setInterval(setup(), 1000); должно быть setInterval(setup, 1000); Вы пытаетесь повторно запустить возвращаемое значение setup, но эта функция не возвращает функцию.
@Archer круто, это помогло, спасибо! Однако мне не нужно было менять setInterval.
@MatiasBerglund Просто подумайте о том, что произойдет, если сервер начнет отвечать дольше секунды. Кроме того, спросите себя, можно ли что-нибудь получить, используя setInterval вместо setTimeout. Я буду всегда рекомендовать использовать setTimeout для повторных вызовов API.
Возможный дубликат Вызов функций с помощью setTimeout()
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
вам нужно сделать это:
setInterval(function(){setup()}, 1000);
Или просто setInterval(setup, 1000);, что намного короче. Совершенно необязательно оборачивать функцию внутри такой функции. setup прекрасно вызывается сама по себе.
@YevgenGorbunkov Они уже получают данные. Это никак не поможет.