1
\$\begingroup\$

I previously asked for a review at Count to target with JavaScript, and it was a great help. I'm now looking for comments on the extended version. This code very simply counts in the direction of a particular target number, with the count slowing down as the target gets nearer. The target number is stored in a nearby file and is often modified by other processes (so this should display a gradual change towards the new number.

Please be as brutal as you like with ways to improve the code or the algorithm (I'm aware there should be comments) - I'm a recreational programmer and would like to be improving my skills. This is absolutely my first use of AJAX and I'm amazed it worked at all :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
  <title>Count to a particular target</title> 
</head> 
<body> 
<h1 id="myDiv">Starting</h1> 
<script type="text/javascript">
    currentValue = 100;
    targetValue = 1000;//as an initialisation value
ticks=0;


    function count() {
ticks++;
if (ticks==100)
{
ticks=0;
loadtarget();
}   
        if (currentValue == targetValue) return;
        currentValue < targetValue ? currentValue++ : currentValue--;
        document.getElementById('myDiv').innerHTML = 'Total wordcount:'+ currentValue.toString();
        setTimeout(count,Math.max(20, 1000 - Math.abs(currentValue - targetValue))/10);
 }
function loadtarget()
{
var xmlhttp;
if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
   {
   targetValue=xmlhttp.responseText;
   }
 }
xmlhttp.open("GET","target.txt",true);
xmlhttp.send();
}

loadtarget();
count()
</script> 
</body> 
</html> 
\$\endgroup\$
1
\$\begingroup\$
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
  <title>Count to a particular target</title> 
</head> 
<body> 
<h1 id="myDiv">Starting</h1> 
<script type="text/javascript">

 var zCurrentValue = 100, zTargetValue = 1000, zTicks=0; // z-prefix synonym with control variables
 getHostValue(); // initial load of server data        
 intervalCheck(); 

function intervalCheck() {
  zTicks++; 

  if (zTicks==100) getHostValue(); // limit reached - get stuff
  if (zCurrentValue == zTargetValue) return; // equal - stop processing over all

  zCurrentValue < zTargetValue ? zCurrentValue++ : zCurrentValue--; // get closer to target ...
  document.getElementById('myDiv').innerHTML = 'Total word count:'+ zCurrentValue.toString(); // visualisation
  setTimeout(intervalCheck,Math.max(20, 1000 - Math.abs(zCurrentValue - zTargetValue))/10); // fiddle the milliseconds
}
function getHostValue() {

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function() { (xmlhttp.readyState==4 && xmlhttp.status==200) ?   zTargetValue = xmlhttp.responseText : zTicks=0 ;  } // zTicks = 0 always true, at least once
xmlhttp.open("GET","target.txt",true);
xmlhttp.send();
}
</script> 
</body> 
</html> 
\$\endgroup\$
1
  • \$\begingroup\$ It can be reduced somewhat more, but the setTimeout should be reworked - so it is more clear what is going on ... \$\endgroup\$ Sep 27 '11 at 11:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.