Tell me more ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.
up vote 1 down vote favorite

I previously asked for a review at Code Review: 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>
share|improve this question

1 Answer

up vote 0 down vote accepted 
<!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>
share|improve this answer
It can be reduced somewhat more, but the setTimeout should be reworked - so it is more clear what is going on ... – Michael Kenneth Rasch Sep 27 '11 at 11:10
Thank you! looks great:) – Joe Sep 27 '11 at 13:29

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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