setInterval导致浏览器崩溃

时间:2016-01-29 13:36:05

标签: javascript jquery

我有3个div:

<div class="heading-bold"></div>
<div class="heading-raise"></div>
<div class="heading-isis"></div>

我希望这些按顺序出现然后淡出,每个之间有一个定时延迟。然后我需要在无限循环上重复该过程。我已经把一个相当粗略的方法组合在一起,但是为了循环序列而添加setInterval会导致浏览器最终崩溃。

这是我的代码:

window.onload = function start() {
    animate();
}

function animate() {
    window.setInterval(animate, 9500);

    var delay = 1000;

    setTimeout(function() {
        $('.heading-bold').css({
            "display": "block"
        });
    }, delay);

    var delay = 3000;

    setTimeout(function() {
        $('.heading-bold').fadeOut(750);
    }, delay);

    var delay = 3750;

    setTimeout(function() {
        $('.heading-bold').remove(750);
    }, delay);

    setTimeout(function() {
        $('.heading-raise').css({
            "display": "block"
        });
    }, delay);

    var delay = 5750;

    setTimeout(function() {
        $('.heading-raise').fadeOut(750);
    }, delay);

    var delay = 6250;

    setTimeout(function() {
        $('.heading-raise').remove(750);
    }, delay);

    setTimeout(function() {
        $('.heading-isis').css({
            "display": "block"
        });
    }, delay);

    var delay = 8750;

    setTimeout(function() {
        $('.heading-isis').fadeOut(750);
    }, delay);

    var delay = 9500;

    setTimeout(function() {
        $('.heading-isis').remove(750);
    }, delay);
}

我确信这样做的效率要高得多,但我想知道是否有任何简单的解决方案可以阻止浏览器崩溃。

3 个答案:

答案 0 :(得分:2)

问题在于:

function animate () {
    window.setInterval(animate, 9500);

每次animate函数运行时,它都会启动一个间隔计时器再次调用它。这意味着它第一次运行时,将在9500毫秒内运行一次。第二次运行时,它启动另一个间隔计时器,因此在9500ms后它将运行两次。然后4次。然后8 ......等等。

您要么将setInterval更改为setTimeout,以便它只在9500ms之后运行一次(然后再次通过另一次调用setTimeout排队),或者将呼叫转移到setInterval

window.onload = function start() {
    animate();
    setInterval(animate, 9500);
}

答案 1 :(得分:2)

你为什么打电话

window.setInterval(animate, 9500);

在animate函数里面?您正在设置一个间隔(无限),每次运行会自动(无限地)返回,因此它将占用指数多于所需的资源。

像这样重建它;

function animate () {
    ...
}

window.onload = function start() {
    animate();
    window.setInterval(animate, 9500);
}

答案 2 :(得分:1)

也许以下内容适合您:

编辑:我通过在动画结束时使fadeIn()和fadeOut()互相调用来添加无限循环。

&#13;
&#13;
 var interval_ms = 1.5 * 1000;
 var fadeIn;
 var fadeOut;

 fadeIn =  function(){
  
      $( "#div1" ).fadeIn( interval_ms, 
        function() {
          $( "#div2" ).fadeIn( interval_ms, 
            function() {
              $( "#div3" ).fadeIn( interval_ms , fadeOut );
            }
          );
        }
      );
  
  };

fadeOut =  function(){
  
      $( "#div3" ).fadeOut( interval_ms, 
        function() {
          $( "#div2" ).fadeOut( interval_ms, 
            function() {
              $( "#div1" ).fadeOut( interval_ms , fadeIn );
            }
          );
        }
      );
  
  };

fadeIn();
&#13;
 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


    <div id="div1" class="heading-bold"  style="display: none;" > div1 </div>
    <div id="div2" class="heading-raise" style="display: none;" > div2 </div>
    <div id="div3" class="heading-isis"  style="display: none;" > div3 </div>

 
&#13;
&#13;
&#13;