Question

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

但动画并非同时启动。

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

还有glboal计时器。

var timer=setInterval(animation,?);

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

在0s时，用户触发ele1的动画，并在0.5s用户触发ele2。

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

1秒？

如果是这样，在1s时，ele2的宽度将改变，但是在1.5s时，计时器应该为ele2做一些事情，因为ele2的动画被触发为.5s，但是下一次发生的定时器将是2s，那怎么解决呢？

想法？

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()）。

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

1 个答案: