javascript - jQuery fadeIn和fadeOut占用50％的处理器

我有135个html元素，我希望它们可以随机地淡入和淡出，因此我为此编写了代码：

setInterval(function() {
    ggg = Math.floor(Math.random() * (50 - 1 + 1) + 1);
    $("#f" + ggg).fadeIn(500, function() {  });
    $("#f" + ggg).fadeOut(500);
}, 300);


setInterval(function() {
    ggg = Math.floor(Math.random() * (100 - 50 + 1) + 50);
    $("#f" + ggg).fadeIn(500, function() {  });
    $("#f" + ggg).fadeOut(500);
}, 300);

setInterval(function() {
    ggg = Math.floor(Math.random() * (135 - 100 + 1) + 100);
    $("#f" + ggg).fadeIn(500, function() {   });
    $("#f" + ggg).fadeOut(500);
}, 300);

但是问题是，即使Windows笔记本电脑没有问题，在Macbook Pro上我的i7占用了50％。有人可以重写代码以获得更好的性能吗？

最佳答案

animate = function() {
  ggg = Math.floor(Math.random() * (100 - 50 + 1) + 50);
  $("#f" + ggg).fadeIn(500, function() {
  $("#f" + ggg).fadeOut(500,animate);
  })
}
animate();

要延迟，请进行以下修改：

  $("#f" + ggg).delay(300).fadeOut(500,animate);

您也可以在开始另一个动画之前使用.stop(true,true)清除队列。