jQuery function animate with setTimeout is running once

Question

I made a function that change the text inside a DIV and update the text after delay and few seconds. This animation works nice but i want to repeat it endless. I have tried this with adding setTimeout but this only loads the first var change. Can somebody advice me what is going wrong?

// After adding this the function loops once
setTimeout(function(){
  transition_updated();
}, 10);

function transition_updated() {

        // Set the ID where it's need to change the text
        $("#post-change-transition").delay(2000).animate({opacity:0 },  function() {
            var publishedText = $('.transition-published').html();
            var updatedText = $('.transition-updated').html();

            $(this).text(publishedText).animate({opacity:1},1000, function(){
                $(this).delay(2000).animate({opacity:0},1000, function(){
                    $(this).text(updatedText).animate({opacity:1}, 1000, function(){});
                });
            });
        });   

       // Without this part the function loops three times
       // After adding this part this will only loop once
       setTimeout(function(){
            transition_updated();
       }, 10);
}

// Init function
transition_updated();

question from:https://stackoverflow.com/questions/65870302/jquery-function-animate-with-settimeout-is-running-once

Answer 1

setTimeout(callback, ms);

ms is milliseconds, maybe it is just halted?

and why don't you try setInterval?