Verwendung von setTimeout und setInterval möglich?

Question

Wie kann ich die Ausführung einer Animation verzögern, die aus 30 Sequenzen mit einem Intervall von 50 ms besteht?

$(function() { 
    setInterval("anim1()", 50); 
    setTimeout("anim1()", 3000); /* doesn't work */ 
}); 



function anim1() { 
    var oCurBack = $('#fullback div.current'); 
    var oNxtBack = oCurBack.next(); 
    if (oNxtBack.length === 0) 
     return; 

    oNxtBack.addClass('current'); 
    oCurBack.removeClass('current').addClass('previous'); 
} 

Answer 1

Annahme: Sie wollen die Intervall-Animation nach 3 Sekunden zum Starten

• das Intervall in eine Funktion setzen Sie
• verzögern ich die anim1 statt "anim1()" verwenden, um die Zeichenfolge, da die Verwendung einer versteckt Eval
• Sie möchten wahrscheinlich die Animation stoppen, wo Sie jetzt zurückkommen

var tId; // have global id to store the interval 
$(function() { 
    tId = setTimeout(function() { setInterval(anim1, 50) }, 3000); 
}) 

function anim1() { 
    var oCurBack = $('#fullback div.current'); 
    var oNxtBack = oCurBack.next(); 
    if (oNxtBack.length === 0) { 
    clearInterval(tId); // clear the interval now we are done 
    return; 
    } 
    oNxtBack.addClass('current'); 
    oCurBack.removeClass('current').addClass('previous'); 
} 

Zum Wiederholen der Animation alle 4 Sekunden versuchen

var tId1, tId2 
$(function() { 
    tId1 = setInterval(function() { 
    var $divs = $('#fullback div.current'); 
    $divs.removeClass(current); // remove all current 
    $divs.eq(0).removeClass('previous').addClass('current'); // add on the first 
    tId2 = setInterval(anim1, 50); 
    }, 3000); 
}); 


function anim1() { 
    var oCurBack = $('#fullback div.current'); 
    var oNxtBack = oCurBack.next(); 
    if (oNxtBack.length === 0) { 
    clearInterval(tId2); // clear the interval now we are done 
    return; 
    } 
    oNxtBack.addClass('current'); 
    oCurBack.removeClass('current').addClass('previous'); 
}