Сосчитайте до цели с помощью JavaScript расширенный


Я ранее просил пересмотреть по сосчитайте до цели с помощью JavaScript, и это было большим подспорьем. Я сейчас ищу комментарии на расширенную версию. Этот код очень просто подсчитывает в направлении конкретной целевой количество, с учетом замедления как цель становится ближе. Целевое число хранится в соседнем файл и часто изменены другими процессами (так это должно показать постепенное изменение в направлении новый номер.

Пожалуйста, быть такой же жестокой, как вам нравится с способы улучшить код или алгоритм (я в курсе, там должны быть комментарии) - я быстро восстанавливаюсь программист и хотел бы улучшить свои навыки. Это абсолютно мое первое использование AJAX и я поражен, что он работал на всех :)

<!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> 


235
1
задан 26 сентября 2011 в 09:09 Источник Поделиться
Комментарии
1 ответ

<!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>

1
ответ дан 27 сентября 2011 в 11:09 Источник Поделиться