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) 

});