js easy timer

[Praud]

Надо написать с нуля таймер на чистом js.

Как вывести ms ?

  var timerId = setInterval(function () {
      console.log(timer.s++);  // s - seconds 
  },  1000);

Когда пишу такой код, вроде каждую секунду в консоль выводится и нормально работает.

А вот такой вот код выводит миллисекунды неправильно.

var timerId = setInterval(function () {
      console.log(timer.ms++);  // ms - milliseconds 
  },  1);

Я читал про задержку в браузере и т.д, но как мне выводить в точности ms? Есть же много таймеров где они нормально считаются

[Alex11223]

https://developer.mozilla.org/en-US/...AnimationFrame

[Praud]

Возможно, но на лекции мы узнали только про
setInterval и setTimeOut, должны использовать эти функции для построения таймера.
Должно что-то такое получиться.
http://www.online-stopwatch.com/full-screen-stopwatch/

[Alex11223]

По ссылке флеш вообще.

Ну тогда может быть с помощью получения текущего времени самому (пытаться это делать каждую миллисекунду смысла естественно нет)
https://developer.mozilla.org/en-US/...jects/Date/now

[Serge_Bliznykov]

Я читал про задержку в браузере и т.д, но как мне выводить в точности ms?

никак. обычный таймер в Windows срабатывает 18 раз в секунду
меньший интервал времени, чем 1/18 обычным способом недостижим.
да и зачем это нужно, человеческий глаз не способен увидеть событие раз в 1/1000 секунды.

Вы про вывод точного значения миллисекунд сами придумали себе задачу или преподаватели глумятся?

[Praud]

Сообщение от Serge_Bliznykov

никак. обычный таймер в Windows срабатывает 18 раз в секунду
меньший интервал времени, чем 1/18 обычным способом недостижим.
да и зачем это нужно, человеческий глаз не способен увидеть событие раз в 1/1000 секунды.

Вы про вывод точного значения миллисекунд сами придумали себе задачу или преподаватели глумятся?

Сам придумал, мне просто нужен подобный результат как на флеше, используя примитив. Классы Date мы не изучали.

[Praud]

P.S вот второй пример уже не на флеше

http://stopwatch.onlineclock.net/new/

[Alex11223]

И что? Вам документацию читать запрещают? Беги оттуда.

По ссылке выше как раз Date и используют в таймере.

Ну если с 1000 устроила точность, то можно просто например 50 или 100 попробовать вместо 1.

[Serge_Bliznykov]

Сообщение от Praud

P.S вот второй пример уже не на флеше

http://stopwatch.onlineclock.net/new/

так его и разберите.
там всё на чистом JS и сделано.
смотрите в модуле new-stopwatch.js

функция, которая вызывается по кнопке Start выглядит так:

var t = [0, 0, 0, 0, 0, 0, 0, 1];
var firstsplitflag = 0;
var splittime;
function stopstart() {
    t[t[2]] = (new Date()).valueOf();
    t[2] = 1 - t[2];
    if (0 == t[2]) {
        clearInterval(t[4]);
        t[3] += t[1] - t[0];
        document.getElementById("startstopbutton").value = "Start";
        document.getElementById('split').innerHTML += (t[7]++) + ' Stop: ' + format(t[1] - t[0]) + '<br>';
        t[4] = t[1] = t[0] = 0;
        disp();
        firstsplitflag = 0;
    } else {
        document.getElementById("startstopbutton").value = "Stop";
        t[4] = setInterval(disp, 43);
    }
}

обратите внимание, что SetInterval делается раз в 43 мс.
Вы это на экране успеваете увидеть?!

ну и остальные функции тоже вполне себе прозрачные:

function dosplit() {
    if (0 !== t[2]) 
    {
        document.getElementById('split').innerHTML += (t[7]++) + ' Split: ' + format(t[1] - t[0]) + '<br>';
    }
}
function reset_it() {
    if (t[2])
        stopstart();
    t[4] = t[3] = t[2] = t[1] = t[0] = 0;
    disp();
    document.getElementById('split').innerHTML = '';
    t[7] = 1;
}
function disp() {
    if (t[2])
        t[1] = (new Date()).valueOf();
    t[6].value = format(t[3] + t[1] - t[0]);
}
function format(ms) {
    var d = new Date(ms + t[5]).toString().replace(/.*([0-9][0-9]:[0-9][0-9]:[0-9][0-9]).*/, '$1');
    var x = String(ms % 1000);
    while (x.length < 3)
        x = '0' + x;
    d += '.' + x;
    return d;
}
function load() {
    t[5] = new Date(1970,1,1,0,0,0,0).valueOf();
    t[6] = document.getElementById('disp');
    disp();
}

[Praud]

Не запрещают конечно, просто может быть требуется брать пройденный материал.

Если я беру 50, он мне вообще в консоль выводит 20 чисел

  var timerId = setInterval(function () {
    timer.ms += 1;
    console.log(timer.ms);
  }, 50);

  setTimeout(function() {
     clearInterval(timerId);
  }, 1000);

}

Мне же нужно как в тех таймерах каждую мс записывать? А что там с Date.now? Какой принцип?