设置间隔导致浏览器崩溃

setInterval Causing Browser to Crash

本文关键字：浏览器 崩溃 设置      更新时间：2023-09-26

我有 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);
}

我确信有一种更有效的方法可以做到这一点，但是我想知道是否有任何简单的解决方案可以阻止浏览器崩溃。

问题就在这里：

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

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

您要么希望将该setInterval更改为setTimeout，以便它仅在这 9500 毫秒后运行一次（然后再次排队并再次调用 setTimeout ），或者将调用移动到 setInterval ：

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

你为什么要打电话 

window.setInterval(animate, 9500);

在动画功能内部？您正在设置一个间隔（无限），该间隔在每次运行时（无限）重新调整自身，因此它将占用比所需多得多的资源。

像这样重新安置它;

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

也许以下内容适合您：

编辑：我通过在动画结束时相互调用 fadeIn（） 和 fadeOut（） 来添加无限循环。

 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();
 
    <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>

相关文章：