blocks|key|1719136|text|根据我的经验，即使我所认识到的js的最小合理时间大约是32-33毫秒，这也是一种损失。..。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1719137|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

To my experience it is lost effort, even as the smallest reasonable amount of time I ever recognized js act in is around 32-33 ms. ...

blocks|key|1504125|text|这肯定是有限制的。为了给你一些视角，谷歌刚刚发布的Chrome浏览器足够快，它可以在15-20ms内执行setTimeout(+function+()+{}，0)，而旧的Javascript引擎执行该函数需要数百毫秒。尽管setTimeout使用毫秒，但在这个时间点上，没有javascript虚拟机可以执行如此精确的代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1504126|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

There is definitely a limitation here. To give you some perspective, the Chrome browser Google just released is fast enough that it can execute setTimeout(function() {}, 0) in 15-20 ms whereas older Javascript engines took hundreds of milliseconds to execute that function. Although setTimeout uses milliseconds, no javascript virtual machine at this point in time can execute code with that precision.

blocks|key|1719279|text|丹，根据我的经验(包括在JavaScript中实现SMIL2.1语言，其中时间管理是一个主题)，我可以向你保证，你实际上永远不需要setTimeout或setInterval的高精度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1719280|然而，真正重要的是setTimeout/setInterval在排队时的执行顺序--而且总是完美地工作。|1719281|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

Dan, from my experience (that includes implementation of SMIL2.1 language in JavaScript, where time management is in subject) I can assure you that you actually never need high precision of setTimeout or setInterval.

What does however matter is the order in which setTimeout/setInterval gets executed when queued - and that always works perfectly.

blocks|key|1719433|text|JavaScript超时有一个10-15ms的实际限制(我不确定你在做什么才能得到200ms，除非你正在执行185ms的实际js+)。这是由于windows的标准计时器分辨率为15ms，唯一能做得更好的方法是使用Windows的更高分辨率的计时器，这是一个系统范围的设置，这样就可以与系统上的其他应用程序打交道，还可以延长电池寿命(Chrome在这个问题上有一个来自英特尔的错误)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1719434|10-15ms的事实标准是由于人们在网站上使用0ms超时，但随后以一种假设10-15ms超时的方式编码(例如，js游戏假设速度为60fps，但要求0ms/frame，没有增量逻辑，因此游戏/站点/动画比预期快几个数量级)。考虑到这一点，即使在没有windows计时器问题的平台上，浏览器也将计时器的分辨率限制在10ms。|1719435|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

JavaScript timeouts have a defacto limit of 10-15ms (I'm not sure what you're doing to get 200ms, unless you're doing 185ms of actual js execution). This is due to windows having a standard timer resolution of 15ms, the only way to do better is to use Windows' higher resolution timers which is a system wide setting so can screw with other applications on the system and also chews battery life (Chrome has a bug from Intel on this issue).

The defacto standard of 10-15ms is due to people using 0ms timeouts on websites but then coding in a way that assumes that assumes a 10-15ms timeout (eg. js games which assume 60fps but ask 0ms/frame with no delta logic so the game/site/animation goes a few orders of magnitude faster than intended). To account for that, even on platforms that don't have windows' timer problems, the browsers limit timer resolution to 10ms.

blocks|key|1719464|text|Shog9的回答和我想说的差不多，不过我会添加以下关于UI动画/事件的内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1719465|如果你有一个框，它应该滑到屏幕上，向下扩展，然后淡入它的内容，不要试图将所有三个事件分开，并定时使它们一个接一个地触发-使用回调，所以一旦第一个事件完成滑动，它就会调用扩展器，一旦完成，它就会调用衰减器。jQuery可以很容易地做到这一点，我相信其他库也可以做到。|1719466|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

shog9's answer is pretty much what I'd say, although I'd add the following about UI animation/events:

If you've got a box that's supposed to slide onto the screen, expand downwards, then fade in its contents, don't try to make all three events separate with delays timed to make them fire one after another - use callbacks, so once the first event is done sliding it calls the expander, once that's done it calls the fader. jQuery can do it easily, and I'm sure other libraries can as well.

blocks|key|1504440|text|你需要在目标时间上“爬上去”。一些尝试和错误将是必要的，但在本质上。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1504441|将超时设置为在所需时间之前100毫秒左右完成|1504442|使超时处理程序的函数如下：|1504443|calculate_remaining_time
if+remaining_time+>+20ms+//+maybe+as+much+as+50
++re-queue+the+handler+for+10ms+time
else
{
++while(+remaining_time+>+0+)+calculate_remaining_time;
++do_your_thing();
++re-queue+the+handler+for+100ms+before+the+next+required+time
}|code-block|syntax|javascript|1504444|但是您的while循环仍然可能被其他进程中断，所以它仍然不是完美的。|1504445|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|R|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

You need to "creep up" on the target time. Some trial and error will be necessary but in essence.

Set a timeout to complete arround 100ms before the required time

make the timeout handler function like this:

<pre><code>calculate_remaining_time
if remaining_time &gt; 20ms // maybe as much as 50
 re-queue the handler for 10ms time
else
{
 while( remaining_time &gt; 0 ) calculate_remaining_time;
 do_your_thing();
 re-queue the handler for 100ms before the next required time
}
</code></pre>

But your while loop can still get interrupted by other processes so it's still not perfect.

blocks|key|1504540|text|如果您需要在给定的时间间隔内获得准确的回调，以下要点可能会对您有所帮助：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1504541|https://gist.github.com/1185904|offset|length|1504542|function+interval(duration,+fn){
++var+_this+=+this
++this.baseline+=+undefined
++
++this.run+=+function(){
++++if(_this.baseline+===+undefined){
++++++_this.baseline+=+new+Date().getTime()
++++}
++++fn()
++++var+end+=+new+Date().getTime()
++++_this.baseline+%2B=+duration
+
++++var+nextTick+=+duration+-+(end+-+_this.baseline)
++++if(nextTick<0){
++++++nextTick+=+0
++++}
++++
++++_this.timer+=+setTimeout(function(){
++++++_this.run(end)
++++},+nextTick)
++}

++this.stop+=+function(){
++++clearTimeout(_this.timer)
++}
}|code-block|syntax|javascript|1504543|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|V|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|C]]]]

If you need to get an accurate callback on a given interval, this gist may help you:
<a href="https://gist.github.com/1185904" rel="nofollow noreferrer">https://gist.github.com/1185904</a>
<pre class="lang-js prettyprint-override"><code>function interval(duration, fn){
 var _this = this
 this.baseline = undefined
 
 this.run = function(){
 if(_this.baseline === undefined){
 _this.baseline = new Date().getTime()
 }
 fn()
 var end = new Date().getTime()
 _this.baseline += duration
 
 var nextTick = duration - (end - _this.baseline)
 if(nextTick&lt;0){
 nextTick = 0
 }
 
 _this.timer = setTimeout(function(){
 _this.run(end)
 }, nextTick)
 }

 this.stop = function(){
 clearTimeout(_this.timer)
 }
}
</code></pre>

blocks|key|1504638|text|。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1504639|参考：http://www.sitepoint.com/creating-accurate-timers-in-javascript/|offset|length|1504640|这个网站在很大程度上帮助了我。|1504641|您可以使用系统时钟来补偿计时器的不准确。如果您将计时函数作为一系列setTimeout调用来运行-每个实例都调用下一个实例-那么为了保持它的准确性，您所要做的就是准确地计算出它到底有多不准确，并从下一次迭代中减去差值：|1504642|var+start+=+new+Date().getTime(),++
++++time+=+0,++
++++elapsed+=+'0.0';++
function+instance()++
{++
++++time+%2B=+100;++
++++elapsed+=+Math.floor(time+/+100)+/+10;++
++++if(Math.round(elapsed)+==+elapsed)+{+elapsed+%2B=+'.0';+}++
++++document.title+=+elapsed;++
++++var+diff+=+(new+Date().getTime()+-+start)+-+time;++
++++window.setTimeout(instance,+(100+-+diff));++
}++
window.setTimeout(instance,+100);++|code-block|syntax|javascript|1504643|这种方法将最大限度地减少漂移，并将误差降低90%25以上。|1504644|它解决了我的问题，希望它能有所帮助|1504645|entityMap|0|LINK|mutability|MUTABLE|url|http://www.sitepoint.com/creating-accurate-timers-in-javascript/^0|0|3|1S|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@$D|12|E|13|1|14]]|A|$]]|$1|F|3|G|5|6|7|15|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|16|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|17|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|19|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

.

REF; <a href="http://www.sitepoint.com/creating-accurate-timers-in-javascript/" rel="noreferrer">http://www.sitepoint.com/creating-accurate-timers-in-javascript/</a>

This site bailed me out on a major scale.

You can use the system clock to compensate for timer inaccuracy. If you run a timing function as a series of setTimeout calls — each instance calling the next — then all you have to do to keep it accurate is work out exactly how inaccurate it is, and subtract that difference from the next iteration:

<pre><code>var start = new Date().getTime(), 
 time = 0, 
 elapsed = '0.0'; 
function instance() 
{ 
 time += 100; 
 elapsed = Math.floor(time / 100) / 10; 
 if(Math.round(elapsed) == elapsed) { elapsed += '.0'; } 
 document.title = elapsed; 
 var diff = (new Date().getTime() - start) - time; 
 window.setTimeout(instance, (100 - diff)); 
} 
window.setTimeout(instance, 100); 
</code></pre>

This method will minimize drift and reduce the inaccuracies by more than 90%.

It fixed my issues, hope it helps

blocks|key|1504713|text|这里有一个演示Shog9建议的例子。这将在6秒内平滑地填充jquery进度条，然后在填充后重定向到不同的页面：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1504714|var+TOTAL_SEC+=+6;
var+FRAMES_PER_SEC+=+60;
var+percent+=+0;
var+startTime+=+new+Date().getTime();

setTimeout(updateProgress,+1000+/+FRAMES_PER_SEC);

function+updateProgress()+{
++++var+currentTime+=+new+Date().getTime();

++++//+1000+to+convert+to+milliseconds,+and+100+to+convert+to+percentage
++++percent+=+(currentTime+-+startTime)+/+(TOTAL_SEC+*+1000)+*+100;

++++$("#progressbar").progressbar({+value:+percent+});

++++if+(percent+>=+100)+{
++++++++window.location+=+"newLocation.html";
++++}+else+{
++++++++setTimeout(updateProgress,+1000+/+FRAMES_PER_SEC);
++++}+++++++++++++++++
}|code-block|syntax|javascript|1504715|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here's an example demoing Shog9's suggestion. This fills a jquery progress bar smoothly over 6 seconds, then redirects to a different page once it's filled: 

<pre><code>var TOTAL_SEC = 6;
var FRAMES_PER_SEC = 60;
var percent = 0;
var startTime = new Date().getTime();

setTimeout(updateProgress, 1000 / FRAMES_PER_SEC);

function updateProgress() {
 var currentTime = new Date().getTime();

 // 1000 to convert to milliseconds, and 100 to convert to percentage
 percent = (currentTime - startTime) / (TOTAL_SEC * 1000) * 100;

 $("#progressbar").progressbar({ value: percent });

 if (percent &gt;= 100) {
 window.location = "newLocation.html";
 } else {
 setTimeout(updateProgress, 1000 / FRAMES_PER_SEC);
 } 
}
</code></pre>

blocks|key|1719899|text|不久前，我遇到了类似的问题，并提出了一种将requestAnimationFrame与performance.now()相结合的方法，该方法非常有效。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1719900|我现在可以让计时器精确到小数点后12位：|1719901|++++window.performance+=+window.performance+%7C%7C+{};
++++performance.now+=+(function()+{
++++++++return+performance.now+++++++%7C%7C
++++++++++++performance.mozNow++++%7C%7C
++++++++++++performance.msNow+++++%7C%7C
++++++++++++performance.oNow++++++%7C%7C
++++++++++++performance.webkitNow+%7C%7C
++++++++++++++++function()+{
++++++++++++++++++++//Doh!+Crap+browser!
++++++++++++++++++++return+new+Date().getTime();+
++++++++++++++++};
++++++++})();|code-block|syntax|javascript|1719902|http://jsfiddle.net/CGWGreen/9pg9L/|1719903|entityMap|0|LINK|mutability|MUTABLE|url^0|L|L|0|0|0|0|Z|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Z|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|10|8|@]|D|@$9|11|A|12|1|13]]|E|$]]|$1|O|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|N]]]]

I had a similar problem not long ago and came up with an approach which combines <code>requestAnimationFrame</code> with performance.now() which works very effectively.

Im now able to make timers accurate to approx 12 decimal places:

<pre><code> window.performance = window.performance || {};
 performance.now = (function() {
 return performance.now ||
 performance.mozNow ||
 performance.msNow ||
 performance.oNow ||
 performance.webkitNow ||
 function() {
 //Doh! Crap browser!
 return new Date().getTime(); 
 };
 })();
</code></pre>

<a href="http://jsfiddle.net/CGWGreen/9pg9L/">http://jsfiddle.net/CGWGreen/9pg9L/</a>

blocks|key|1719974|text|这是我为我的一个音乐项目做的定时器，它可以做这个事情。在所有设备上都准确的计时器。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1719975|​|1719976|var+Timer+=+function(){
++var+framebuffer+=+0,
++var+msSinceInitialized+=+0,
++var+timer+=+this;

++var+timeAtLastInterval+=+new+Date().getTime();

++setInterval(function(){
++++var+frametime+=+new+Date().getTime();
++++var+timeElapsed+=+frametime+-+timeAtLastInterval;
++++msSinceInitialized+%2B=+timeElapsed;
++++timeAtLastInterval+=+frametime;
++},1);

++this.setInterval+=+function(callback,timeout,arguments)+{
++++var+timeStarted+=+msSinceInitialized;
++++var+interval+=+setInterval(function(){
++++++var+totaltimepassed+=+msSinceInitialized+-+timeStarted;
++++++if+(totaltimepassed+>=+timeout)+{
++++++++callback(arguments);
++++++++timeStarted+=+msSinceInitialized;
++++++}
++++},1);

++++return+interval;
++}
}

var+timer+=+new+Timer();
timer.setInterval(function(){console.log("This+timer+will+not+drift."),1000}|code-block|syntax|javascript|1719977|1719978|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

This is a timer I made for a music project of mine which does this thing. Timer that is accurate on all devices.

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var Timer = function(){
 var framebuffer = 0,
 var msSinceInitialized = 0,
 var timer = this;

 var timeAtLastInterval = new Date().getTime();

 setInterval(function(){
 var frametime = new Date().getTime();
 var timeElapsed = frametime - timeAtLastInterval;
 msSinceInitialized += timeElapsed;
 timeAtLastInterval = frametime;
 },1);

 this.setInterval = function(callback,timeout,arguments) {
 var timeStarted = msSinceInitialized;
 var interval = setInterval(function(){
 var totaltimepassed = msSinceInitialized - timeStarted;
 if (totaltimepassed &gt;= timeout) {
 callback(arguments);
 timeStarted = msSinceInitialized;
 }
 },1);

 return interval;
 }
}

var timer = new Timer();
timer.setInterval(function(){console.log("This timer will not drift."),1000}</code></pre>
</div>
</div>

blocks|key|1720041|text|您可以考虑使用html5+webaudio+clock，它使用系统时间以获得更好的准确性|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1720042|entityMap|0|LINK|mutability|MUTABLE|url|http://www.sitepoint.com/creating-accurate-timers-in-javascript/^0|7|K|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

You could consider using the <a href="http://www.sitepoint.com/creating-accurate-timers-in-javascript/" rel="nofollow">html5 webaudio clock</a> which uses the system time for better accuracy

Something that has always bugged me is how unpredictable the <code>setTimeout()</code> method in Javascript is.

In my experience, the timer is horribly inaccurate in a lot of situations. By inaccurate, I mean the actual delay time seems to vary by 250-500ms more or less. Although this isn't a huge amount of time, when using it to hide/show UI elements the time can be visibly noticeable.

Are there any tricks that can be done to ensure that <code>setTimeout()</code> performs accurately (without resorting to an external API) or is this a lost cause?

Is there a more accurate way to create a Javascript timer than setTimeout?

虚拟机

Windows

jQuery

一直困扰我的是Javascript中的setTimeout()方法是多么的不可预测。根据我的经验，计时器在很多情况下是非常不准确的。所谓不准确，我的意思是实际的延迟时间似乎或多或少变化了250-500ms。虽然这并不是很长的时间，但当使用它来隐藏/显示UI元素时，时间是显而易见的。有没有什么技巧可以确保setTimeo...

问有比setTimeout更精确的创建Javascript计时器的方法吗？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有比setTimeout更精确的创建Javascript计时器的方法吗？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有比setTimeout更精确的创建Javascript计时器的方法吗？
EN