Сброс SetTimeout после периода времени

Question

Борясь тренировки, где «clearTimeout» будет вписываться в этому потоку:

$(window).ready(function() { 

    setTimeout(function() { 
    $('.hoverone').addClass('flip'); 
    }, 2000); 

    setTimeout(function() { 
    $('.hovertwo').addClass('flip'); 
    }, 2500); 

    setTimeout(function() { 
    $('.hoverone').removeClass('flip'); 
    }, 4000); 

    setTimeout(function() { 
    $('.hovertwo').removeClass('flip'); 
    }, 4500); 

}); 

После того, как последнее действие было сделано - я хотел бы таймер для сброса и расхода начните снова. Я попробовал clearTimeout, но у меня очень специфический поток временных действий, которые мне нужно выполнить.

Answer 1

Я предлагаю вам использовать весь набор тайм-аутов в функции. Таким образом вам не нужно очищать таймаут.

var intervalFunction = function(){ 
    setTimeout(function() { 
    $('.hoverone').addClass('flip'); 
    }, 2000); 

    setTimeout(function() { 
    $('.hovertwo').addClass('flip'); 
    }, 2500); 

    setTimeout(function() { 
    $('.hoverone').removeClass('flip'); 
    }, 4000); 

    setTimeout(function() { 
    $('.hovertwo').removeClass('flip'); 
    intervalFunction(); 
    }, 4500); 
} 

$(window).ready(intervalFunction); 

Answer 2

Вот ответ для тех, кто еще ищет - благодаря

$(window).ready(function flow(){   


    setTimeout(function() { 
    $('.hoverone').addClass('flip'); 
}, 
    2000); 

    setTimeout(function() { 
    $('.hovertwo').addClass('flip'); 
}, 
    2500); 

    setTimeout(function() { 
    $('.hoverone').removeClass('flip'); 
}, 
    4000); 

    setTimeout(function() { 
    $('.hovertwo').removeClass('flip'); 
}, 
    4500); 

setInterval(flow, 8000); 


}); 

Answer 3

Я хотел бы попробовать что-то вроде этого:

$(window).ready(function() { 

    //all setTimeouts start (almost) the same time 
    var time1 = 2000, 
     time2 = time1 + 500, 
     time3 = time2 + 1500, 
     time4 = time3 + 500, 
     repeatTime = time4 + 1000; //delay before the restart 

    //this will run again and again until you stop it 
    //basically it will start over after 1 second after the 4th settimeout is finished 
    var Fn = setInterval(function() { 
    setTimeout(function() { 
     $('.hoverone').addClass('flip'); 
    }, time1); 

    setTimeout(function() { 
     $('.hovertwo').addClass('flip'); 
    }, time2); 

    setTimeout(function() { 
     $('.hoverone').removeClass('flip'); 
    }, time3); 

    setTimeout(function() { 
     $('.hovertwo').removeClass('flip'); 
    }, time4); 
    }, repeatTime); 

    //this is how you stop it from repeating anymore 
    //clearInterval(Fn); 
}); 

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

Answer 4

Чтобы повторить эти события времени, вы должны использовать setInterval. Кроме того, вы можете объединить четыре действия в одной функции:

$(window).ready(function(){  
    var halfSeconds = 0; 
    var timer = setInterval(function() { 
     halfSeconds = (halfSeconds + 1) % 12; // change the 12 to adjust repeat-delay 
     if (halfSeconds === 4) $('.hoverone').addClass('flip'); 
     if (halfSeconds === 5) $('.hovertwo').addClass('flip'); 
     if (halfSeconds === 8) $('.hoverone').removeClass('flip'); 
     if (halfSeconds === 9) $('.hovertwo').removeClass('flip'); 
    }, 
    500); 

    // Optional: if you have an event that should stop the repetition: 
    $('#myStopButton').click(function() { 
     clearInterval(timer); 
    }); 
}); 

Это также будет полезно иметь возвращаемое значение setInterval так что вы можете остановить анимацию, когда какое-то событие происходит (например, щелчок на «стоп» кнопка).

Answer 5

JsFiddle

$(window).ready(function(){  
var hoverone,hovertwo; 
call(); 
function call(){ 
     hoverone= setTimeout(function() { 
      $('.hoverone').addClass('flip'); 
      clearTimeout(hovertwo); 
      call1(); 
     }, 
     2000); 
    } 

    function call1(){ 
      hovertwo = setTimeout(function() { 
      $('.hovertwo').addClass('flip'); 
      clearTimeout(hoverone); 
      call2(); 
     }, 2500); 
    } 
    function call2(){ 
      hovertwo = setTimeout(function() { 
      $('.hoverone').removeClass('flip'); 
      clearTimeout(hoverone); 
      call3(); 
     }, 2500); 
    } 
    function call3(){ 
      hovertwo = setTimeout(function() { 
      $('.hovertwo').removeClass('flip'); 
      clearTimeout(hoverone); 
      call(); 
     }, 2500); 
    } 
});