i have a page which is displaying a temperature number from a mysql DB and a slider which gets its value from the same database. I would like to run both the DB query and display the values on page start so I get a temperature and slider value straight away. The the temperature will refresh every 5 seconds but the slider value will do this every couple min. I could probably get this working ok with setInterval but have been warned about this causing delay stack ups so i am trying setTime out but I cannot get it working (first time using this)
<script>
var gaugeData = function(){
$.ajax({
url:"data.php",
dataType:"json",
success: function(data){
console.log(data);
$('#thermostatSlider').val(data.thermostat);
if (data.temp <= 15){
document.getElementById("RoomTemp").style.color = '#00FFFF';
}
if (data.temp > 15 && data.temp < 21){
document.getElementById("RoomTemp").style.color = '#FF9900';
}
if (data.temp >= 21){
document.getElementById("RoomTemp").style.color = '#FF3300';
}
$("#RoomTemp").html(data.temp + '°C');
sliderFunction();
}
});
}
function sliderFunction(){
var currentValue = $('#currentValue');
$('#thermostatSlider').change(function(){
currentValue.html(this.value);
});
$('#thermostatSlider').change();
};
setTimeout(sliderFunction, 9000);
setInterval (gaugeData, 5000);
Amy help please