Update data periodicaly
HTML
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<body>
<div id="slider-range"></div>
<div id="console"></div>
</body>
CSS
#console {
margin-top: 20px;
height:500px;
overflow:scroll;
border : 1px solid gray;
font-family : monospace;
font-size : small;
}
JavaScript
$(function() {
console.log(updateData)
var timeout = 500; // half a second
var scheduler = new Scheduler(updateData, timeout);
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function(){
scheduler.keepUpdating();
}
});
});
function Scheduler(callback, timeout) {
this.callback = callback;
this.timeout = timeout;
this.currentlyUpdating = false;
this.finalTimeout = null;
this.keepUpdating = function(){
if(!this.currentlyUpdating){
this.startPeriodicUpdate();
}
if(this.finalTimeout){
clearTimeout(this.finalTimeout);
}
var self = this;
this.finalTimeout = setTimeout(function(){
self.discontinueUpdates();
}, this.timeout);
};
this.startPeriodicUpdate = function(){
this.currentlyUpdating = true;
this.runPeriodicUpdate();
};
this.runPeriodicUpdate = function(){
if($.isFunction(this.callback)){
this.callback();
}
var self = this;
if(this.currentlyUpdating){
setTimeout(function(){
self.runPeriodicUpdate()
}, self.timeout);
}
};
this.discontinueUpdates = function(){
this.currentlyUpdating = false;
};
}
function updateData(){
write("Updating now");
}
function write(str){
var p = $("<p style='color:blue;'>" + str + "</p>");
$("#console").append(p);
p.animate({color:"gray"}, "fast");
setTimeout(function(){
p.remove();
}, 2000);
}