如何为页面中的所有javascript动画使用全局计时器

在我的页面中，有几个动画（使用计时器更改大小或背景颜色），我听说在一个页面中使用太多计时器会导致性能问题，建议使用全局计时器

但动画不会同时启动

例如，我有两个元素（ele1和ele2），其宽度将每秒更改

还有一个glboal定时器

var timer=setInterval(animation,?);

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

0时，用户触发ele1的动画，0.5时，用户触发ele2

现在，如何设置全局计时器的延迟

1秒

如果是这样，在1s时，ele2的宽度将改变，但是在1.5s时，计时器应该为ele2做些事情，因为ele2的动画在.5s时触发，但是计时器的下一次出现时间是2s，那么如何修复它

---

想法呢？

您必须将全局计时器与所有计时器一起使用

如果计时器为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（）

）。

但页面中动画的计数不确定，延迟也是一样。@hguser这就是我所说的，如果有多个计时器，你必须对所有计时器进行GCD。对于

1,1.5,2.5,5

，它将是

0.5

。然后使用具有该值的全局计时器。因为数字是GCD的倍数，所以您可以用这种格式写入。但我必须在第一个动画开始时初始化计时器，此时，我不知道页面上有多少动画。@hguser然后可能就是您要找的