Chrome中的慢速JavaScript动画
我对Chrome中的HTML对象的样式操作有一个问题。
下面是一个示例：
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');如果在正常的网站上运行，通过setInterval函数设置动画的对象有时会运行缓慢。奇怪的是，由jQuery制作的动画对象可以流畅地运行在oO上。
(为我糟糕的英语道歉)。
回答 2
Stack Overflow用户
发布于 2012-01-15 16:00:39
首先，不能保证间隔计时器完全按照您设置的时间运行，特别是在时间间隔非常短的情况下。在许多浏览器中，setInterval()都有允许的最小时间值。因此，如果最小时间大于13ms，或者如果许多间隔调用超过13ms，则具有固定步数动画将花费更长的时间和更慢的速度。
其次，任何可靠的动画都必须使用补间算法，它计算要使用的步骤，然后在每一步上，它重新评估(通过比较系统时间与该步数的预期系统时间)它是落后于计划还是提前计划，并相应地调整未来的步长，以便它将按时完成，并显示出适当的速度。这就是jQuery的动画所做的。这就是你的setInterval()动画不能做的事情。
这是一个关于动画的自调整计时器的reference article，用于运行可预测的时间量，以及关于计时器的最小时间的another article。
这是an article and code on tweening和另一个进行补间的piece of code。
另外，为了简单起见，请更改以下内容：
document.getElementsByTagName('body')[0]要这样做：
document.bodyStack Overflow用户
发布于 2012-01-15 16:01:38
你的计时器会在一秒内执行很多很多次。我认为它太快了，这可能会导致浏览器延迟。我相信jQuery动画功能的间隔是50ms。
看看this question，它谈到了interval浏览器的性能，并考虑增加您的interval时间。
https://stackoverflow.com/questions/8870999
复制
腾讯云开发者
