循环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

你的代码非常复杂。当然可以用更短的方式编写。 但如果它对你有效，我不会讨论它。

所以我认为问题是在6000ms循环上运行playStory()函数...

那将是：

var playInterval = setInterval(playStory,6000);

// To stop it
clearInterval(playInterval);

如果你想循环clearStory()：

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

// To stop it
clearInterval(playInterval);