JSFiddle - React, Tailwind, and code Playground
HTML
<input type="button" id="test" value="Ping these!"/>
<table>
<tr><td id="siteUCSC" rowspan="3"><a href="http://www.downforeveryoneorjustme.com/http://genome.ucsc.edu/">UCSC</a></td>
<td>US</td>
<td><div id="statusUS" value="http://128.114.119.137"></div></td>
</tr>
<tr>
<td>Europe</td>
<td><div id="statusEU" value="http://192.38.44.238"></div></td>
</tr>
<tr>
<td>Cornell University</td>
<td><div id="statusCU" value="132.236.82.88"></div></td>
<!--http://genome-mirror.bscb.cornell.edu/-->
</tr>
</table>
JavaScript
$("#test").click(function(){
//Pinger_ping("128.114.119.137"); //http://genome.ucsc.edu/
var best_ping = 999;
$("div").each( function(){
var msg = this.id;
var ip = $(this).attr("value");
var avg = 0;
var cpt = 0;
var i=0;
for(i=0; i<10;i++){
var ping = $.now();
$.ajax({ type: "HEAD",
url: ip,
cache:false,
complete: function(output){
ping = $.now() - ping;
if (ping < 1000) { // 1 times out of 2, the diff is not computed
cpt++;
avg+= ping/cpt - avg/cpt; //update average val
$("#"+msg).text(avg+" ms (on "+cpt+"tests)");
$("#"+msg).trigger('change')
if(avg < 200) {
$("#"+msg).css({"color": "green"});
} else if (avg < 500) {
$("#"+msg).css({"color": "orange"});
} else {
$("#"+msg).css({"color": "red"});
}
if(best_ping > avg) {
best_ping = avg;
$("#siteUCSC a").attr("href",ip);
}
}
}
});
}
});
});