Почему несколько вызовов setTimeout () вызывают такое большое отставание?

У меня есть сложная последовательность анимации, включающая затухание и переходы в JavaScript. Во время этой последовательности, состоящей из четырех изменяющихся одновременно элементов, для каждого элемента используется setTimeout .

Протестировано в Internet Explorer 9, анимация работает со скоростью реального времени (это должно занимать 1,6 секунды, занял ровно 1,6 секунды). ЛЮБОЙ другой браузер будет ужасно тормозить, время анимации составляет 4 секунды (Firefox 3 и 4, Chrome, Opera) и примерно 20 секунд в IE 8 и ниже.

Как IE9 может работать так быстро, когда все другие браузеры застревают в грязь?

Я пытался найти способы объединить элементы в один, чтобы иметь один setTimeout в любой момент времени, но, к сожалению, этого не произошло. • противостоять любому вмешательству (например, щелкнуть другую ссылку, чтобы начать новую анимацию до того, как закончится текущая).

РЕДАКТИРОВАТЬ: Чтобы уточнить в ответ на комментарии, вот схема кода:

link.onclick = function() {
    clearTimeout(colourFadeTimeout);
    colourFadeTimeout = setTimeout("colourFade(0);",25);

    clearTimeout(arrowScrollTimeout);
    arrowScrollTimeout = setTimeout("arrowScroll(0);",25);

    clearTimeout(pageFadeOutTimeout);
    pageFadeOutTimeout = setTimeout("pageFadeOut(0);",25);

    clearTimeout(pageFadeInTimeout);
    pageFadeInTimeout = setTimeout("pageFadeIn(0);",25);
}

Каждый из четыре функции продвигают постепенное изменение изображения на один кадр, затем устанавливают другой тайм-аут с увеличивающимся аргументом до конца анимации.

Вы можете увидеть страницу по адресу http://adamhaskell.net/cw/index. html (Имя пользователя: knockknock; Пароль: goaway) (в нем есть звук и музыка, которые можно отключить, но имейте в виду!) - мой JavaScript очень беспорядочный, так как я действительно не организовал его должным образом, но он прокомментирован немного, так что, надеюсь, вы понимаете, в чем заключается основная идея.