Endless upcoming text using javascript

Question

My task is to create the page with text blocks upcoming endless inside the div block. Here is my solution:

  <script>
            var startOffset = 0;
            var startOffsetPlus;
            var startOffsetMinus;
            $(document).ready(function () {

                startOffset = $(".carousel-item").last().offset().top;
                startOffsetPlus = "+="+ startOffset +"px";
                startOffsetMinus = "-="+ startOffset +"px";
                //endless loop call
                setInterval('beginEndlessLoop()', 1000/*Starting delay in ms*/);
            });
            function beginEndlessLoop(){
                setInterval('moveTextUp()', 0 /*ms*/);
            }
            function moveTextUp() {
                $(".carousel-block").animate(
                    {"top": startOffsetMinus}, 
                    {
                        duration: 10000/*ms*/, 
                        easing: "linear"}
                    );
                //move blocks to start position
                $(".carousel-block").animate({"top": startOffsetPlus}, 0/*ms*/);
            }
</script>

This solution works fine. But One problem is that this script takes processor and memory more and more. I'm not a javascript programmer. Could anyone please tell me how to call Garbage collector or something? =)

Answer 1

you dont need setInterval()

use callback in $.animate

function moveTextUp()
{
 $(".carousel-block").animate(
                    {"top": startOffsetMinus}, 
                    {
                        duration: 10000/*ms*/, 
                        easing: "linear",
                        complete: moveTextUp
                    }

                    );
}

Answer 2

Done. Works!

 <script>
            var startOffset = 0;
            var startOffsetPlus;
            var startOffsetMinus;
            $(document).ready(function () {
                startOffset = $(".carousel-item").last().offset().top;
                startOffsetPlus = "+="+ startOffset +"px";
                startOffsetMinus = "-="+ startOffset +"px";
                window.setTimeout(function(){moveTextUp()}, 3000);
            });
            function moveTextUp() {
                $(".carousel-block").animate({"top": startOffsetMinus}, 10000, 'linear', function() {
                    $(".carousel-block").animate({"top": startOffsetPlus}, 0);
                    moveTextUp();
                });
            }
</script>