JSON數據在刷新時閃爍，避免每次都繪製新數據...？

Question

我正在嘗試使用moment.js和openweatherapi製作一個小應用程序。我正嘗試重新加載我的頁面，每次'x'時間以便更新。一旦發生這種情況，我的JSON數據閃爍。我以前見過幾個類似這樣的問題，但我仍然在努力..

我用

setTimeout(function(){ 
    window.location.reload(1); 
}, 5000); 

這裏是我的代碼如下所示：

<div id = "data"></div> 
    <ul class = "weatherData"> 
    <li id = "city"></li> 
    <li id = "weatherType"></li> 
    <li id = "fTemp"></li> 
    <li id = "windSpeed"></li> 
    </ul> 
</div> 


<script> 
$(document).ready(function(){ 


    var api = 'http://api.openweathermap.org/data/2.5/weather? 
lat=39.729431&lon=-104.831917&appid=97f35dee6354ab9d2bac7c56a4c4a6fe'; 

    $.getJSON(api, function(data){ 
     var weatherType = data.weather[0].description; 
     var city = data.name; 
     var windSpeed = data.wind.speed; 
     var kTemp = data.main.temp; 
     var fTemp; 
     var cTemp; 

    fTemp = (kTemp*(9/5)-459.67).toFixed(2); 
    cTemp = (kTemp-273).toFixed(2); 

    windSpeed = (2.237*(windSpeed)).toFixed(1); 


$('#city').html(city); 
$('#weatherType').html(weatherType); 
$('#fTemp').html(fTemp + " &#8457;"); 
$('#windSpeed').html(windSpeed + " mph "); 
    }); 
}); 


</script> 

<script> 

var time = moment().format("h:mm"); 
var NowMoment = moment().format('LL'); 
var day = moment().format('dddd'); 

var eDisplayMoment = document.getElementById('displayDate'); 
    eDisplayMoment.innerHTML = NowMoment; 


var eDisplayTime = document.getElementById('displayTime'); 
    eDisplayTime.innerHTML = time; 

document.getElementById('displayDay').innerHTML = day; 



</script> 

有人可以指導我做什麼？

Answer 1

你只需要將你的代碼封裝在一個名爲getWeather的函數中，然後從你的setInterval中調用它。這將重新運行代碼而不是整個頁面。

$(document).ready(function() { 


    var api = 'http://api.openweathermap.org/data/2.5/weather?lat = 39.729431 & lon = -104.831917 & appid = 97 f35dee6354ab9d2bac7c56a4c4a6fe '; 

    function getWeather() { 
    $.getJSON(api, function(data) { 
     var weatherType = data.weather[0].description; 
     var city = data.name; 
     var windSpeed = data.wind.speed; 
     var kTemp = data.main.temp; 
     var fTemp; 
     var cTemp; 

     fTemp = (kTemp * (9/5) - 459.67).toFixed(2); 
     cTemp = (kTemp - 273).toFixed(2); 

     windSpeed = (2.237 * (windSpeed)).toFixed(1); 


     $('#city').html(city); 
     $('#weatherType').html(weatherType); 
     $('#fTemp').html(fTemp + " ℉"); 
     $('#windSpeed').html(windSpeed + " mph "); 
    }); 
    }; 



    getWeather(); 
    setInterval(getWeather, 5000) 

});