CODEWITHSUNDEEP
javascriptjqueryhtmlfirefoxgoogle-chrome
user1150525
user1150525

Reputation:

Slow JavaScript animation in Chrome

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).

Upvotes: 4

Views: 3230

Answers (2)

jfriend00
jfriend00

Reputation: 707148

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

Upvotes: 3

Jivings
Jivings

Reputation: 23250

Your timer will execute many many times a second. I would suggest that it is too fast which could be causing browser lag. The jQuery animate function interval is 50ms I believe.

Take a look at this question which talks about interval browser performance and consider raising your interval time.

Upvotes: 2

Related Questions