7

ミリ秒ごとに関数を実行しようとしています。これを達成するために、setIntervaljavascript の概念を優先しました。私のコードは以下のとおりです。

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;

}

したがって、上記のコードは正常に機能しています。しかし、実際のクロックで結果をテストしている間、実際のクロックは 1 秒を完了するのに 1000 ミリ秒を必要とし、同時に結果は 1 秒を完了するのに 1000 ミリ秒以上を必要とします。

デモ

誰か教えてくれませんか？

私のコードに間違いはありますか？はいの場合は、ミリ秒を正確に表示する方法を教えてください。

4

5 に答える 5

9

コードに誤りはありませんが、JavaScript タイマー (setIntervalおよびsetTimeout)は正確ではありません。ブラウザは、このような短い間隔に準拠できません。そのため、ミリ秒を正確に1 ずつ増やして更新を Web ブラウザーに表示する方法はありません。いずれにせよ、それは人間の目には見えません！

正確な回避策には、より大きな間隔と、経過時間をミリ秒単位で計算するためのタイムスタンプが含まれます。

var start = new Date().getTime();
setInterval(function() {
    var now = new Date().getTime();
    xElement.innerHTML = (now - start) + 'ms elapsed';
}, 40);
于 2013-09-18T19:26:16.087 に答える
5

できません。ブラウザが使用する最小遅延があります。関数をミリ秒ごとに実行することはできません。

Mozilla のドキュメントから:

...4ms は HTML5 仕様で指定されており、ブラウザ間で一貫しています...

ソース: https://developer.mozilla.org/en-US/docs/Web/API/window.setTimeout#Minimum.2F_maximum_delay_and_timeout_nesting

于 2013-09-18T19:28:15.963 に答える
4

DOM は実際には10001 秒あたりの回数を更新できません。1000さらに言えば、モニターは1 秒間にフレームを表示することさえできません。関数内で開始時刻と現在時刻の差をミリ秒単位で計算し、それを使用します。

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

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

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

更新されたフィドル

于 2013-09-18T19:28:37.870 に答える
3

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;   
}

そのようなハードコードされた setInterval の代わりに requestanimationframe の使用を検討することもできます。

于 2013-09-18T19:28:16.647 に答える
0

The setInterval callback probably does not happen with millisecond accuracy, since the thread the timer is running on might not even actually be running when the time is up, or the browser throttles events, or any other of quite a few things.

In addition, since most Javascript engines are single threaded, what the implementation of setInterval might do is once it triggers, run your callback, and then reset the clock for the next call. Since you're doing some DOM manipulation, that might take several milliseconds on its own.

In short, you're expecting a Real Time Operating System behavior from an interpreter running inside of another application, on top of what is more than likely not an RTOS.

于 2013-09-18T19:28:07.290 に答える