Question

所以，我有这个非常复杂的自定义动画，它使用了很多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过载，因此弱系统或智能手机可能出现问题。

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

Answer 1

首先，我很惊讶，如果你在第12行和第23行或第24行中没有关闭括号}，那么它可以正常工作。

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

一个2000计时器，其中包含：
- 一个2000计时器（原4000），其中包含：
  - 2000计时器（原6000）

然而，这可能会给你带来绝对的性能提升。

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

Answer 2

像这样的模式而不是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
}());

有没有办法使用一个setTimeout而不是很多？

2 个答案: