如何缓存 forecast.io api 数据
How to cache forecast.io api data
我正在使用 jquery 和 forecast.io 在我的 magento 网站的管理部分获取天气数据。
我想知道如何将数据缓存一定的分钟数,这样我就可以减少已完成的 api 数据请求量。这样,只有在缓存时间 运行 结束后才会请求新数据。
<script>
var $j = jQuery.noConflict();
$j(document).ready(function(){
var apiKey = 'API KEY';
//Go to forecast.io get your free API Key
var curl = 'https://api.forecast.io/forecast/';
var lati = 37.8267;
var longi = -122.423;
var data;
$j.ajax({
type: "GET",
url: curl + apiKey +"/"+ lati +","+ longi +"?callback=?",
dataType: "json",
success: function(data){
//var json = $j.parseJSON(data);
console.log(data);
$j("#currentTemperature").append(Math.floor(data.currently.temperature));
$j("#currentTime").append(Date(data.currently.time));
if(data.currently.icon == 'clear-day') { $j("#clear-day").css("display", "block")};
if(data.currently.icon == 'clear-night') { $j("#clear-night").css("display", "block")};
if(data.currently.icon == 'rain') { $j("#rain").css("display", "block")};
if(data.currently.icon == 'snow') { $j("#snow").css("display", "block")};
if(data.currently.icon == 'sleet') { $j("#sleet").css("display", "block")};
if(data.currently.icon == 'wind') { $j("#wind").css("display", "block")};
if(data.currently.icon == 'fog') { $j("#fog").css("display", "block")};
if(data.currently.icon == 'cloudy') { $j("#cloudy").css("display", "block")};
if(data.currently.icon == 'partly-cloudy-day') { $j("#partly-cloudy-day").css("display", "block")};
if(data.currently.icon == 'partly-cloudy-night') { $j("#partly-cloudy-night").css("display", "block")};
if(data.currently.icon == 'hail') { $j(".currentIcon").css("display", "block")};
if(data.currently.icon == 'thunderstorm') { $j(".currentIcon").css("display", "block")};
if(data.currently.icon == 'tornado') { $j(".currentIcon").css("display", "block")};
$j("#humidity").append(data.currently.humidity);
$j("#currentWind").append(data.currently.windSpeed);
$j("#hourlySummary").append(data.hourly.summary);
$j("#currentSummary").append(data.currently.summary);
$j("#daily_summary").append(data.daily.summary);
$j("weekly").append(data.daily.data[0].apparentTemperatureMax);
},
error: function() {
alert("An error occurred");
}
});
});
</script>
<div class="weather-widget">
<h4 class="wwl-title">Place</h4>
<div class="row">
<figure class="icons">
<canvas id="clear-day" width="140" height="140" style="display: none;">
</canvas>
<canvas id="clear-night" width="140" height="140" style="display: none;">
</canvas>
<canvas id="partly-cloudy-day" width="140" height="140" style="display: none;">
</canvas>
<canvas id="partly-cloudy-night" width="140" height="140" style="display: none;">
</canvas>
<canvas id="cloudy" width="140" height="140" style="display: none;">
</canvas>
<canvas id="rain" width="140" height="140" style="display: none;">
</canvas>
<canvas id="sleet" width="140" height="140" style="display: none;">
</canvas>
<canvas id="snow" width="140" height="140" style="display: none;">
</canvas>
<canvas id="wind" width="140" height="140" style="display: none;">
</canvas>
<canvas id="fog" width="140" height="140" style="display: none;">
</canvas>
</figure>
<div class="temp-feed">
<h1 class="temp"><span id="currentTemperature"></span><i class=" wi wi-fahrenheit"></i></h1>
<div class="summdetail">
<small id="currentSummary"></small></br>
<span id="currentWind" class=" wi wi-strong-wind"></span><span>mph</span></br>
<span id="dayIcon"></span>
</div>
</div>
</div><!-- /.row -->
</div>
谁能告诉我该怎么做?
您获取数据并将其分配给变量:
var weather_obj = {};
weather.temp = data_return_from_api_call.temp;
将所有要存储的变量分配为成员,就像我在上面对 temp 所做的那样。您在需要数据的代码中随处使用该 obj 。
页面启动时,您会启动一个计时器。
setInterval(function(){ alert("Hello"); }, 3000);
在 'alert("Hello")' 的位置,您编写检索数据的代码。这将设置一个计时器,该计时器将 运行 按设定的时间间隔运行,在示例中为每 3000 毫秒或 3 秒。这会每隔您认为合适的秒数更新对象中的值。只要页面在桌面上打开,它就会继续 运行 这个计时器。
我正在使用 jquery 和 forecast.io 在我的 magento 网站的管理部分获取天气数据。
我想知道如何将数据缓存一定的分钟数,这样我就可以减少已完成的 api 数据请求量。这样,只有在缓存时间 运行 结束后才会请求新数据。
<script>
var $j = jQuery.noConflict();
$j(document).ready(function(){
var apiKey = 'API KEY';
//Go to forecast.io get your free API Key
var curl = 'https://api.forecast.io/forecast/';
var lati = 37.8267;
var longi = -122.423;
var data;
$j.ajax({
type: "GET",
url: curl + apiKey +"/"+ lati +","+ longi +"?callback=?",
dataType: "json",
success: function(data){
//var json = $j.parseJSON(data);
console.log(data);
$j("#currentTemperature").append(Math.floor(data.currently.temperature));
$j("#currentTime").append(Date(data.currently.time));
if(data.currently.icon == 'clear-day') { $j("#clear-day").css("display", "block")};
if(data.currently.icon == 'clear-night') { $j("#clear-night").css("display", "block")};
if(data.currently.icon == 'rain') { $j("#rain").css("display", "block")};
if(data.currently.icon == 'snow') { $j("#snow").css("display", "block")};
if(data.currently.icon == 'sleet') { $j("#sleet").css("display", "block")};
if(data.currently.icon == 'wind') { $j("#wind").css("display", "block")};
if(data.currently.icon == 'fog') { $j("#fog").css("display", "block")};
if(data.currently.icon == 'cloudy') { $j("#cloudy").css("display", "block")};
if(data.currently.icon == 'partly-cloudy-day') { $j("#partly-cloudy-day").css("display", "block")};
if(data.currently.icon == 'partly-cloudy-night') { $j("#partly-cloudy-night").css("display", "block")};
if(data.currently.icon == 'hail') { $j(".currentIcon").css("display", "block")};
if(data.currently.icon == 'thunderstorm') { $j(".currentIcon").css("display", "block")};
if(data.currently.icon == 'tornado') { $j(".currentIcon").css("display", "block")};
$j("#humidity").append(data.currently.humidity);
$j("#currentWind").append(data.currently.windSpeed);
$j("#hourlySummary").append(data.hourly.summary);
$j("#currentSummary").append(data.currently.summary);
$j("#daily_summary").append(data.daily.summary);
$j("weekly").append(data.daily.data[0].apparentTemperatureMax);
},
error: function() {
alert("An error occurred");
}
});
});
</script>
<div class="weather-widget">
<h4 class="wwl-title">Place</h4>
<div class="row">
<figure class="icons">
<canvas id="clear-day" width="140" height="140" style="display: none;">
</canvas>
<canvas id="clear-night" width="140" height="140" style="display: none;">
</canvas>
<canvas id="partly-cloudy-day" width="140" height="140" style="display: none;">
</canvas>
<canvas id="partly-cloudy-night" width="140" height="140" style="display: none;">
</canvas>
<canvas id="cloudy" width="140" height="140" style="display: none;">
</canvas>
<canvas id="rain" width="140" height="140" style="display: none;">
</canvas>
<canvas id="sleet" width="140" height="140" style="display: none;">
</canvas>
<canvas id="snow" width="140" height="140" style="display: none;">
</canvas>
<canvas id="wind" width="140" height="140" style="display: none;">
</canvas>
<canvas id="fog" width="140" height="140" style="display: none;">
</canvas>
</figure>
<div class="temp-feed">
<h1 class="temp"><span id="currentTemperature"></span><i class=" wi wi-fahrenheit"></i></h1>
<div class="summdetail">
<small id="currentSummary"></small></br>
<span id="currentWind" class=" wi wi-strong-wind"></span><span>mph</span></br>
<span id="dayIcon"></span>
</div>
</div>
</div><!-- /.row -->
</div>
谁能告诉我该怎么做?
您获取数据并将其分配给变量:
var weather_obj = {};
weather.temp = data_return_from_api_call.temp;
将所有要存储的变量分配为成员,就像我在上面对 temp 所做的那样。您在需要数据的代码中随处使用该 obj 。
页面启动时,您会启动一个计时器。
setInterval(function(){ alert("Hello"); }, 3000);
在 'alert("Hello")' 的位置,您编写检索数据的代码。这将设置一个计时器,该计时器将 运行 按设定的时间间隔运行,在示例中为每 3000 毫秒或 3 秒。这会每隔您认为合适的秒数更新对象中的值。只要页面在桌面上打开,它就会继续 运行 这个计时器。