Как использовать глобальный таймер для всей анимации JavaScript на странице

Question

На моей странице есть несколько анимаций (изменение размера или backgroundColor с использованием таймера), я слышал, что использование слишком большого количества таймеров на одной странице вызовет проблемы с производительностью, и рекомендуется использовать глобальный таймер.

Но анимация не запускается в одно и то же время.

Например, у меня есть два элемента (ele1 и ele2), ширина которых будет изменяться в секунду.

И есть таймер glboal.

var timer=setInterval(animation,?);

function animation(){
  //do ele1's animation
  //do ele2's animation
}

В 0 с, пользовательская анимация триггера ele1, и в 0,5 с пользовательский триггер ele2.

Теперь, как установить задержку таймера глобализации?

1с?

Если это так, то через 1с ширина эле2 изменится, но через 1,5 с таймер должен что-то сделать для эле2, потому что анимация эле2 срабатывает при .5с, однако следующее возникновениетаймер будет 2с, тогда как это исправить?

А идея?

Answer 1

Вы должны будете использовать глобальный таймер с GCD всех таймеров.

Если у вас есть таймер для 1.0 и 1.5, вы можете создать глобальный таймер для 0.5 и поддерживать одну глобальную переменную дляколичество вызовов глобального таймера.

var timerCount = 0 ;
var timer=setInterval(animation,500);

function animation(){

    // i.e. ele1TimerValue / globalTimerValue
    if(timerCount%2) {
        //do ele1's animation
    }

    if(timerCount%3) {  
        //do ele2's animation
    }
    ++timerCount;
}

Для многих анимаций будет лучше использовать этот таймер в качестве контроллера для вызова соответствующих анимаций (например, ele1Animate() и ele2Animate()).