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

Question

我有 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% 的电量。有人可以重写代码以获得更好的性能吗？

Answer 1

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) 清除队列。