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

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

有人可以指導我做什麼？

來源

2017-04-17 Johnny Shellabarger

'JSON data blinks'？你什麼意思？ – Dummy

爲什麼頁面需要重新加載才能更新數據？ – guest271314

@Johnny Shellabarger：在這裏你正在做'window.location.reload（）'，它實際上模擬瀏覽器中的「刷新」功能，這就是爲什麼你在瀏覽器中看到「閃爍」效果，實際上完整的html頁面可能是再次加載。相反，您應該創建View和ViewModel並更新您的html頁面（View）的數據（ViewModel）。你可以閱讀關於knockout.js的非常基本的教程，這將在30分鐘內完成你的工作。這是非常容易和大量的在線教程可用。讓我知道你是否需要任何指導。 –

你只需要將你的代碼封裝在一個名爲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 + " &#8457;"); 
     $('#windSpeed').html(windSpeed + " mph "); 
    }); 
    }; 



    getWeather(); 
    setInterval(getWeather, 5000) 

});

來源

2017-04-17 02:41:05 MartinWebb

這似乎沒有工作... –

對不起，打錯了最後一行setInterval（getWeather（）...應該閱讀getWeather沒有括號。 – MartinWebb

是不是它已經看到了？我很困惑 –

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

回答

相關問題