循环设置超时

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