Joke Task :)

by kasheftin

HTML

<table>
    <tbody>
        <tr>
            <td>Наш таймер:</td>
            <td id="timer1"></td>
        </tr>
        <tr>
            <td>Текущее время:</td>
            <td id="timer2"></td>
        </tr>
        <tr>
            <td>Разница:</td>
            <td id="timerDiff"></td>
        </tr>
    </tbody>
</table>

CSS

td {
    text-align: right;
}

JavaScript

// Наш супер-таймер, который должен отражать реальное время
var ourTimer = 0;

// Какое-то действие, которое занимает время, в конце вызывает callback
var doSomeAction = function(callback) {
    setTimeout(callback,Math.floor(Math.random()*200));
}

// Главный цикл
var run = function() {
    // Запоминаем текущее время
    var startDt = (new Date).getTime();
    // Делаем что-то, что занимает время, и потом вызываем callback
    doSomeAction(function() {
        // Итак, что-то сделали. Посмотрим, сколько сейчас времени
        var currentDt = (new Date).getTime();
        // Посчитаем, сколько времени ушло на асинхронное действие
        var diffDt = currentDt-startDt;
        // Добавим к нашему таймеру это время, оно должно быть равно реальному
        ourTimer += diffDt;

        // Выведем для отладки время нашего таймера и реальное
        document.getElementById("timer1").innerHTML = ourTimer;
        document.getElementById("timer2").innerHTML = currentDt;
        document.getElementById("timerDiff").innerHTML = currentDt-ourTimer;
        
        // Зациклим код
        run();
    });
}

// Запускаем
ourTimer = (new Date).getTime();
run();