setInterval Причинение Browser врезаться

Question

У меня есть 3 дивы:

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

Я уверен, что есть гораздо более эффективный способ сделать это, однако, мне было интересно, есть ли простое решение, чтобы остановить это от сбоя браузера.

Answer 1

вопроса здесь:

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

Каждый раз, когда запускается функция animate, он начинает интервальный таймер вызвать его снова. Это означает, что при первом запуске он будет работать один раз в 9500 мс. Во второй раз, когда он запускается, он начинает другой интервальный таймер, поэтому после 9500 мс он будет работать дважды. Затем 4 раза. Тогда 8 ... и т.д.

Вы либо хотите изменить что setInterval в setTimeout так работает только один раз после этих 9500ms (то очередями себя снова с другим вызовом setTimeout), или переместить вызов setInterval:

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

Answer 2

Почему вы называете

window.setInterval(animate, 9500); 

Внутри функции живого? Вы устанавливаете интервал (бесконечно), который перенастраивается (бесконечно) с каждым прогоном, поэтому он будет занимать экспоненциально больше ресурсов, чем необходимо.

Ограничьте это так:

function animate() { 
    ... 
} 

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

Answer 3

Возможно следующее будет подходящим для вас:

Edit: я добавил Бесконечный цикл, делая 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>