Блог

Мне просто нужно создать бесконечный цикл через 3 варианта элемента. Это то, что у меня есть до сих пор:

     var count = 1;
    setTimeout(transition, 2000);

    function transition() {

        if(count == 1) {
            $('#ele').html('variation 2');
            var count = 2;

        } else if(count == 2) {
            $('#ele').html('variation 3');
            var count = 3;

        } else if(count == 3) {
            $('#ele').html('variation 1');
            var count = 1;
        }

        setTimeout(transition, 2000);

    }
  

попробуйте это :

 var count = 1;

function transition() {

    if(count == 1) {
        $('#ele').html('variation 2');
         count = 2;

    } else if(count == 2) {
        $('#ele').html('variation 3');
         count = 3;

    } else if(count == 3) {
        $('#ele').html('variation 1');
        count = 1;
    }

}
setInterval(transition, 2000);
  

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

 var i=0;

setInterval(function() {
    switch(i  %3) {
        case 0: alert("variation 1");
        break;
        case 1: alert("variation 2");
        break;
        case 2: alert("variation 3");
        break;
    }

}, 2000);
  

Если позже вы решите, что вам нужно остановить повторяющийся код, сохраните возвращаемое значение при установке интервала и очистите его:

 var intervalId = setInterval(function() {
    ...
}, 1000);

clearInterval(intervalId);
  

Это лучшее решение:

Метод clearTimeout() очищает таймер, установленный с помощью метода setTimeout().

 (function(){
    var timer, count=1;
    function transition(){
        clearTimeout(timer);

        switch(count){
            case 1: count = 2; break;
            case 2: count = 3; break;
            case 3: count = 1; break;
        }

        $('#ele').html('variation '   count);

        timer = setTimeout(transition, 2000);
    }
    transition();
})();
  

У вас есть var перед вашей count переменной внутри transition функции. Удалите их, и внешняя count переменная сохранит свое значение.

Мой лучший способ в реальных заданиях — «Забыть базовые циклы» в этом случае и использовать эту комбинацию «setInterval» включает «setTimeout»s:

     function iAsk(lvl){
        var i=0;
        var intr =setInterval(function(){ // start the loop 
            i  ; // increment it
            if(i>lvl){ // check if the end round reached.
                clearInterval(intr);
                return;
            }
            setTimeout(function(){
                $(".imag").prop("src",pPng); // do first bla bla bla after 50 millisecond
            },50);
            setTimeout(function(){
                 // do another bla bla bla after 100 millisecond.
                seq[i-1]=(Math.ceil(Math.random()*4)).toString();
                $("#hh").after('<br>' i   ' : rand= ' (Math.ceil(Math.random()*4)).toString() ' > ' seq[i-1]);
                $("#d" seq[i-1]).prop("src",pGif);
                var d =document.getElementById('aud');
                d.play();                   
            },100);
            setTimeout(function(){
                // keep adding bla bla bla till you done :)
                $("#d" seq[i-1]).prop("src",pPng);
            },900);
        },1000); // loop waiting time must be >= 900 (biggest timeOut for inside actions)
    }
  

PS: Поймите, что реальное поведение (setTimeout): все они начнутся в одно и то же время «три бла-бла-бла начнут обратный отсчет в один и тот же момент», поэтому установите другой тайм-аут для организации выполнения.

PS 2: пример для цикла синхронизации, но для циклов реагирования вы можете использовать события, обещающие асинхронное ожидание ..

если вы все еще хотите использовать setTimeout и clearTimeout для создания цикла, вам следует использовать что-то вроде этой структуры для вашего цикла

 var count = 1;
var timer = setTimeout( function(){
    transaction();
} , 2000);

function transition() {

    if(count == 1) {
        $('#ele').html('variation 2');
        count = 2;

    } else if(count == 2) {
        $('#ele').html('variation 3');
        count = 3;

    } else if(count == 3) {
        $('#ele').html('variation 1');
        count = 1;
    }
    //if(condition for continue) 
    setTimeout(transition, 2000);
    //else if you want to stop the loop
    //clearTimeout(timer, 2000);
}