Запуск функции для каждого миллисекунда

Question

Я пытаюсь запустить функцию для каждого миллисекунды. Чтобы достичь этого, я просто предпочел использовать концепцию setInterval в javascript. Мой код приведен ниже,

HTML:

<div id=test>0.0</div> 

Сценарий:

var xVal = 0; 
var xElement = null; 

xElement = document.getElementById("test"); 
var Interval = window.setInterval(startWatch, 1); 


function startWatch(){ 

    xVal += 1; 
    xElement.innerHTML = xVal; 

} 

поэтому выше код работает отлично. Но пока я тестирую результат с реальными часами, реальным часам требуется 1000 миллисекунд, чтобы завершить 1 секунду, и в то же время для завершения потребуется более 1000 миллисекунд.

DEMO

Может кто-нибудь сказать мне,

Есть ли какие-либо ошибки с моим кодом? Если да, то скажите мне, как точно показывать миллисекунды?

Answer 1

В вашем коде нет ошибок, но таймеры JavaScript (setInterval и setTimeout) are not precise. Браузеры не могут выполнить такой короткий интервал. Поэтому я боюсь, что нет никакого способа точно увеличивать миллисекунды на единицу и отображать обновления в веб-браузере. В любом случае, это даже не видно человеческому глазу!

Точная обходной будет включать больший интервал, и временные метки, чтобы вычислить истекшее время в миллисекундах:

var start = new Date().getTime(); 
setInterval(function() { 
    var now = new Date().getTime(); 
    xElement.innerHTML = (now - start) + 'ms elapsed'; 
}, 40); 

Answer 2

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

Кроме того, поскольку большинство движков Javascript однопоточные, то, что может сделать реализация setInterval, - это когда это запускает, запускает обратный вызов и затем перезагружает часы для следующего вызова. Поскольку вы выполняете некоторые манипуляции с DOM, это может занять несколько миллисекунд.

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

Answer 3

Вы не можете. Существует минимальная задержка, которую используют браузеры. Вы не можете запускать функцию каждые миллисекунды.

Из документации Mozilla,:

... 4ms определяется спецификацией HTML5 и соответствует во всех браузерах ...

_{Источник: https://developer.mozilla.org/en-US/docs/Web/API/window.setTimeout#Minimum.2F_maximum_delay_and_timeout_nesting}

Answer 4

Вы можете» t сделать это, используя ваш метод из-за задержки, отображающей HTML и выполняющего интервал.Выполнение этого способа будет отображать время правильно при 60FPS.

http://jsfiddle.net/3hEs4/3/

var xElement = null; 
var startTime = new Date(); 

xElement = document.getElementById("test"); 
var Interval = window.setInterval(startWatch, 17); 


function startWatch(){ 
    var currentTime = new Date(); 
    xElement.innerHTML = currentTime - startTime; 
} 

Вы также можете посмотреть в использовании requestanimationframe вместо закодированного setInterval подобное.

Answer 5

DOM не может фактически обновить 1000 раз в секунду. Ваш монитор не может даже отображать 1000 кадров за одну секунду, если на то пошло. Рассчитайте разницу между временем начала и текущее время в миллисекундах в вашей функции и использовать это:

(function(){ 
    var xElement = document.getElementById("test"); 
    var start = new Date; 

    (function update(){ 
     xElement.innerHTML = (new Date - start); 

     setTimeout(update, 0); 
    })(); 
}(); 

Updated fiddle