Infinite Loop. How to stop the Loop in a given situation?

Question

I did the implementation of the code below, it rotates the page every X Seconds, but it never stops, it sits in an infinite loop.

I would like to stop the code from running when:

if (track_click >= total_pages - 1) {}

But I don’t know which code to put to stop the script execution.

  <script type="text/javascript">

    var track_click = 0; 
    var total_pages = <?php echo $total_pages; ?>;

    $('#animation_image').load("exportar_4_detalhe.php", {'page': track_click}, function() {
        track_click++;
    });

    var funcaoCounter = 0;
    var funcaoTimer = setInterval(function(){
        funcaoCounter++;

            $('.load_more').hide();
            $('.animation_image').show(); 



            if (track_click <= total_pages){

                $.post('exportar_4_detalhe.php', {'page': track_click}, function(data) {

                    $(".load_more").hide();

                    $("#results").append(data);

                    var resultado = ( track_click /total_pages ) * 100;
                    // document.title = track_click + " de " + total_pages;

                    var new_num = resultado.toFixed(2);

                    var new_num = new_num + "%";

                    document.title = new_num;

                    $('.porcentagem').text(new_num);

                    $("html, body").animate({scrollTop: $("#animation_image").offset().top}, 500);

                    $('.animation_image').hide();

                    track_click++;

                }).fail(function(xhr, ajaxOptions, thrownError) {
                    alert(thrownError); 
                    $(".load_more").show();
                    $('.animation_image').hide(); 
                });


                if (track_click >= total_pages - 1)
                {
                     $('.animation_image').hide(); 
                     clearInterval(funcaoTimer);
                     alert('Todos os Registros forma Exibidos!');

                }
            }

}, 1000);

</script>

Answer 1

Remove the condition:

if (track_click >= total_pages - 1)

of within of condition:

if (track_click <= total_pages){

If this were a show synchronous, it would be all right, but as it is asynchronous it is possible that the track_click be increased twice between one function invocation and another - causing the if internal never run. This should fix the problem of infinite loop, meanwhile I have a strong suspicion that your code has more problems than that:

• Your line $('#animation_image').load("exportar_4_detalhe.php", ... runs with track_click equal to zero, and at the end increment it to a.
  • If this occurs in less than 1 second, the first invocation of funcaoTimer will request the page 1; otherwise she will order the page 0!
  • Worse: if the first request takes more than 1 and less than 2 seconds, and the second takes least of 1 second, the funcaoTimer will ask for the page 0, and then the page 2 (she will never ask the 1).
• In any situation that the post take more than a second to complete, the setInterval will cause him to be tempted again, with the same page; this means that the same page can be updated twice, causing a race condition (i.e. even if the page is ok, the track_click will be incremented twice by skipping a page as in the previous case).

Your code accurate be refactored, and I have some suggestions for doing so. Assuming (as stated in the commentary) that the pages should be searched in the order, and that it is not necessary to wait 1 second between one and the other, a viable means would be to request the page N in the proper callback page N-1. Example:

var track_click = 0; 
var total_pages = <?php echo $total_pages; ?>;

$('#animation_image').load("exportar_4_detalhe.php", {'page': track_click}, function() {
    track_click++;
    proximaPagina();
});

function proximaPagina() {
    $('.load_more').hide();
    $('.animation_image').show();

    if (track_click <= total_pages){ // Nota: "<=" ou "<"?

        $.post('exportar_4_detalhe.php', {'page': track_click}, function(data) {

            $(".load_more").hide();
            $("#results").append(data);

            var resultado = ( track_click /total_pages ) * 100;
            // document.title = track_click + " de " + total_pages;

            var new_num = resultado.toFixed(2);
            var new_num = new_num + "%";
            document.title = new_num;
            $('.porcentagem').text(new_num);

            $("html, body").animate({scrollTop: $("#animation_image").offset().top}, 500);
            $('.animation_image').hide();

            track_click++;
            proximaPagina(); // Chama de novo pra próxima página, ou para concluir

        }).fail(function(xhr, ajaxOptions, thrownError) {
            alert(thrownError); 
            $(".load_more").show();
            $('.animation_image').hide(); 

            // POSSIBILIDADE: tentar de novo após 1s quando houver falha
            // (descomente para habilitar)
            // setTimeout(proximaPagina, 1000); // Tenta de novo a mesma página
        });
    }
    else {
        $('.animation_image').hide(); 
        alert('Todos os Registros forma Exibidos!');
    }
}