Chrome中缓慢的JavaScript动画 [英] Slow JavaScript animation in Chrome

问题描述

这里是一个例子：

  var a = document.createElement（'div'）; 
 
 a.style.position ='absolute'; 
 a.style.display ='block'; 
 a.style.top ='300px'; 
 a.style.left ='50px'; 
 a.style.height ='100px'; 
 a.style.width ='10px'; 
 a.style.backgroundColor ='＃000000'; 
 a.style.zIndex ='200'; 
 
 a.aW = 10; 
 
 var a2 = document.createElement（'div'）; 
 
 a2.style.position ='绝对'; 
2.style.display ='block'; 
2.a.style.top ='200px'; 
 a2.style.left ='50px'; 
2.a.style.height ='100px'; 
 a2.style.width ='10px'; 
2.style.backgroundColor ='＃000000'; 
2.a.style.zIndex ='200'; 
 a2.id ='a'; 
 
2.aW = 10; 
 
 document.getElementsByTagName（'body'）[0] .appendChild（a）; 
 document.getElementsByTagName（'body'）[0] .appendChild（a2）; 
 
 var b = window.setInterval（function（）{
 a.aW + = 10; 
 if（a.aW> 1600）{
 window。 clearInterval（b）; 
} 
 a.style.width = a.aW +'px'; 
}，13）; 
 $ b $（'＃a'）。animate（{
 width：'1600'
}，2000，'linear'）; 
  

通过setInterval函数动画的对象有时候运行缓慢。
奇怪的是，由jQuery动画的对象运行顺利oO。

（对不起我的英文不好）。
首先，间隔定时器不能保证在你设定的时间内运行，特别是如果时间间隔很短。在许多浏览器中， setInterval（）允许的最小时间值。所以，如果这个最小时间大于13ms，或者如果很多间隔调用的时间超过了13ms，那么具有固定步数的动画将花费更长时间并且变慢。
$ b $其次，任何可靠的动画都必须使用补间算法计算所要使用的步骤，然后在每一步中重新评估（通过比较系统时间与此步数的预期系统时间）无论是进度还是提前，并相应地调整未来的步长，以便按时完成，并显示出正确的速度。这就是jQuery的动画。这就是你的 setInterval（）动画所不能做的。

这是一个参考文章，了解运行可预测时间的动画的自动调整计时器，以及关于定时器的最短时间。

以下补间文章和代码和另一个一小段代码。twilight

另外，为了简单起见，请改变它：

  document.getElementsByTagName（'body'）[0] 
  

对此：

  document.body 
  

i have a problem with the style manipulation of an HTML object in Chrome.

Here is an example:

var a = document.createElement('div');

a.style.position = 'absolute';
a.style.display = 'block';
a.style.top = '300px';
a.style.left = '50px';
a.style.height = '100px';
a.style.width = '10px';
a.style.backgroundColor = '#000000';
a.style.zIndex = '200';

a.aW = 10;

var a2 = document.createElement('div');

a2.style.position = 'absolute';
a2.style.display = 'block';
a2.style.top = '200px';
a2.style.left = '50px';
a2.style.height = '100px';
a2.style.width = '10px';
a2.style.backgroundColor = '#000000';
a2.style.zIndex = '200';
a2.id = 'a';

a2.aW = 10;

document.getElementsByTagName('body')[0].appendChild(a);
document.getElementsByTagName('body')[0].appendChild(a2);

var b = window.setInterval(function () {
    a.aW += 10;
    if (a.aW > 1600) {
        window.clearInterval(b);
    }
    a.style.width = a.aW + 'px';
}, 13);

$('#a').animate({
    width: '1600'
}, 2000, 'linear');

The object which is animated through the setInterval Function is sometimes working slowly if it is run on a normal website. The strange thing is, that the Object animated by jQuery runs smoothly oO.

(Sorry for my bad English).

解决方案

First of all, interval timers are not guaranteed to run exactly at the time you set them for, particularly if the time is a very short interval. In many browsers, there is a minimum time value allowed for setInterval(). So, if that minimum time is greater than 13ms or if many of the interval calls come in longer than 13ms, your animation that has a fixed number of steps will take longer and go slower.

Second of all, any reliable animation must use a tweening algorithm where it calculates the steps it wants to use and then upon each step, it re-evaluates (by comparing the system time with the expected system time for this step number) whether it's behind schedule or ahead of schedule and adjusts the future step size accordingly so that it will complete on time and appear to be going the appropriate speed. That's what jQuery's animation does. That's what your setInterval() animation does not do.

Here is a reference article on self-adjusting timers for animations that run a predictable amount of time and another article on minimum times for timers.

Here's an article and code on tweening and another piece of code that does tweening.

Also, for simplicity's sake, please change this:

document.getElementsByTagName('body')[0]

to this:

document.body

这篇关于Chrome中缓慢的JavaScript动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！