loop in javascript

function DC() {
    var elements = $(".panel");
    elements.first().fadeOut(1000, function() {
        $(this).insertAfte开发者_JS百科r(elements.last());
        $(this).fadeIn(1000);
    });
}

$(document).ready(function() {
    var i =0;
    for (var i=0; i < 10; i++) {
        DC();
    };
});

I want DC() to loop 10 times, but it only looped once.

What did I do wrong?

DC starts a fadeOut 10 times in a row. If you want your elements to fade out and back in 10 times then you should call DC as fadeIn's callback.

elements.first().fadeOut(1000, function() {
    $(this).insertAfter(elements.last());
    $(this).fadeIn(1000, DC);
});

mpartel is correct in that you may want to call DC as a callback - but in order to ensure it doesn't run forever, you'll need to check against a count:

var count = 0;

function DC() {

    elements.first().fadeOut(1000, function() {
        if(count >= 10) return;
        count++;
        $(this).insertAfter(elements.last());
        $(this).fadeIn(1000, DC);
    });
}