0

所以，我有这个相当复杂的自定义动画，它使用了很多setTimeout()

    var i=20;
     while(i!==0){
     setTimeout(function() {
     $("#feedback-toad").css("height","+=12");
     $("#feedback-toad").css("background-position", "50% "+i*(-5)+"%");
     }, i*100);
     i=i-1; }


    setTimeout(function() {
    $("#feedback-toad").prepend("<div id='toad-speaks'>SIGN UP OR LEAVE ME FEEDBACK, IF YOU DON'T WANT TO DO IT...</div>");
  , 2000);


   setTimeout(function() {
  $("#toad-speaks").html("SIGN UP OR LEAVE ME FEEDBACK, IF YOU DON'T WANT TO DO IT..  <br/> <br/> BUT YOU WANT TO ...");
    }, 4000);


    setTimeout(function() {
    $("#feedback-toad").animate({
    height:"60"}, 1000, function(){
     $("#feedback-toad").remove();
                       });
                       }, 6000);

我读过使用大量超时确实会使 CPU 过载，因此可能会出现弱系统或智能手机的问题。

有没有办法优化这段代码，并使用一两次超时？在文章中说这是可能的，但不知道如何。

4

2 回答 2

1

首先，我很惊讶，如果这能按您的预期工作，因为您在第 12 行和第 23 行或第 24 行中缺少右括号 }。

除此之外，您还可以将您的 2000、4000、6000 计时器组合到

  • 一个 2000 计时器，其中包含：
    • 一个 2000 计时器（以前的 4000），其中包含：
      • 2000 计时器（前 6000）

但是，这可能绝对不会给您带来任何性能提升。

而三个真的不是很多。很多将是数十、数百甚至数千（由自动脚本生成）。这可能会导致问题，从较弱的系统开始。但是有 3 或 4 个，你肯定没问题。

于 2013-09-08T23:35:24.507 回答
0

像这样的模式而不是你的模式怎么样while

(function () { // give closure
    var i = 20;
    var doSomething = function () {
        if (i--) {
            $("#feedback-toad").css("height", "+=12");
            $("#feedback-toad").css("background-position", "50% " + i * (-5) + "%");
            setTimeout(doSomething, 100); // re-invoke
        }
    };
    setTimeout(doSomething, 100); // Start it off
}());
于 2013-09-08T23:49:59.493 回答