Loop SetTImeouts

Question

Я использую сетку CSS на своем веб-сайте и setTimeout() для затухания различных элементов сетки, а также для изменения размеров границ. Теперь мне нужно, чтобы сетка работала в непрерывном цикле - я пытаюсь очистить таймауты и добавленные стили, а затем перезапустить начальную функцию. Это то, что у меня есть в данный момент, как мне заставить это работать? Сайт разработчика: http://torabhaig -com.stackstaging.com / Home / и мой код ниже:

var timeouts = []; 

function playStory(){

  stopTracked();
     alert('Tracked timeouts cleared!');

    if ($(window).width() < 768) {
        setTimeout(function(){
      $('.item-7').css('opacity', 1);
    }, 3000);
    setTimeout(function(){
      $('.item-11').css('opacity', 1);
    }, 6000);
    setTimeout(function(){
      $('.item-9').css('opacity', 1);
    }, 9000);
    setTimeout(function(){
      $('.item-12').css('opacity', 1);
    }, 12000);
    setTimeout(function(){
      $('.item-8').css('opacity', 1);
    }, 15000);
setTimeout(function(){
      $('.item-13').css('opacity', 1);
    }, 18000);
   setTimeout(function(){
      $('.item-14').css('opacity', 1);
    }, 21000);
   setTimeout(function(){
      $('.item-16').css('opacity', 1);
    }, 24000);
 setTimeout(function(){
      $('.item-17').css('opacity', 1);
    }, 27000);
 setTimeout(function(){
      $('.item-18').css('opacity', 1);
    }, 30000);
 setTimeout(function(){
      $('.item-19').css('opacity', 1);
    }, 33000);
 setTimeout(function(){
      $('.item-20').css('opacity', 1);
    }, 36000);
 setTimeout(function(){
      $('.item-22').css('opacity', 1);
    }, 39000);
 setTimeout(function(){
  $('.item-23').css('opacity', 1);
    }, 42000);
 setTimeout(function(){
$('.item-24').css('opacity', 1);
    }, 45000);
 setTimeout(function(){
$('.item-25').css('opacity', 1);
    }, 48000);
 }

else {
  alert(timeouts);  

    timeouts.push(setTimeout(function(){
      $('.item-7').css({'opacity':'1', 'border-top': '6px solid #000'});
      $('.item-9').css('border-bottom', 'none');
      $('.item-10').css('border-bottom', 'none');
    }, 3000));
    timeouts.push(setTimeout(function(){
      $('.item-8').css('opacity', 1);
    }, 6000));
    timeouts.push(setTimeout(function(){
      $('.item-9').css('opacity', 1);
       $('.item-9').css('border-right', '6px solid #000');
    }, 9000));
   timeouts.push(setTimeout(function(){
      $('.item-10').css({'opacity': '1', 'border-bottom': '3px solid #000'});
      $('.item-9').css({'border-right':'3px solid #000', 'border-bottom':'3px solid #000'});
      $('.item-7').css({'opacity':'1', 'border-top': '3px solid #000'});
    }, 12000));
    timeouts.push(setTimeout(function(){
      $('.item-11').css('opacity', 1);
    }, 15000));
timeouts.push(setTimeout(function(){
      $('.item-12').css('opacity', 1);
    }, 18000));
    timeouts.push(setTimeout(function(){
      $('.item-13').css('opacity', 1);
    }, 21000));
  timeouts.push(setTimeout(function(){
      $('.item-14').css({'opacity': '1', 'border-bottom': '6px solid #000'});
      $('.item-13').css('border-top', 'none');
      $('.item-10').css('border-left', 'none');
    }, 24000));
   timeouts.push(setTimeout(function(){
        $('.item-16').css({'opacity': '1', 'border-right':'6px solid #000'});
       $('.item-14').css('border-bottom', '3px solid #000');
        $('.item-13').css('border-top', '3px solid #000');
    }, 27000));
 timeouts.push(setTimeout(function(){
      $('.item-15').css({'opacity': '1', 'border-bottom': '6px solid #000', 'border-left': 'none'});
    }, 30000));
 timeouts.push(setTimeout(function(){
      $('.item-17').css('opacity', 1);
      $('.item-15').css('border-bottom', '3px solid #000');
    }, 33000));
 timeouts.push(setTimeout(function(){
       $('.item-18').css('opacity', 1);

    }, 36000));
 timeouts.push(setTimeout(function(){
      $('.item-19').css('opacity', 1);
    }, 39000));
 timeouts.push(setTimeout(function(){
      $('.item-20').css({'opacity': '1', 'border-top': '6px solid #000'});
    }, 42000));
 timeouts.push(setTimeout(function(){
      $('.item-22').css({'opacity': '1', 'border-right': '6px solid #000'});
    }, 45000));
 timeouts.push(setTimeout(function(){
  $('.item-21').css('opacity', 1);
    }, 48000));
 timeouts.push(setTimeout(function(){
  $('.item-23').css('opacity', 1);
  $('.item-20').css('border', '3px solid #000');
    }, 51000));
 timeouts.push(setTimeout(function(){
$('.item-24').css('opacity', 1);
    }, 54000));
 timeouts.push(setTimeout(function(){
$('.item-25').css('opacity', 1);
    }, 57000));
    }
     alert(timeouts);   
    }   


  function stopTracked()
{
   for(var i=0; i<timeouts.length; i++)
 {
    clearTimeout(timeouts[i]);
}

timeouts = [];
 }

 function clearStory()
{

    setTimeout(function(){
    $('.item-7').css('opacity', 0);
    $('.item-8').css('opacity', 0);
    $('.item-9').css('opacity', 0);
    $('.item-10').css('opacity', 0);
    $('.item-11').css('opacity', 0);
    $('.item-12').css('opacity', 0);
    $('.item-13').css('opacity', 0);
    $('.item-14').css('opacity', 0);
    $('.item-15').css('opacity', 0);
    $('.item-16').css('opacity', 0);
    $('.item-17').css('opacity', 0);
    $('.item-18').css('opacity', 0);
    $('.item-19').css('opacity', 0);
    $('.item-20').css('opacity', 0);
    $('.item-21').css('opacity', 0);
    $('.item-22').css('opacity', 0);
    $('.item-23').css('opacity', 0);
    $('.item-24').css('opacity', 0);
    $('.item-25').css('opacity', 0);
}, 60000,);

     playStory();
}

  playStory();
  clearStory();

Answer 1

Ваш код довольно сложный.И, конечно, можно написать более коротким способом.
Но если он работает правильно для вас, я не буду это обсуждать.

Так что я думаю, что вопрос о том, чтобы запустить функцию playStory() нацикл 6000 мс ...

Это будет:

var playInterval = setInterval(playStory,6000);

// To stop it
clearInterval(playInterval);

Если вы хотите выполнить цикл clearStory() тоже:

var playInterval = setInterval(function(){
  playStory();
  clearStory();
},6000);

// To stop it
clearInterval(playInterval);