Problem with setTimeout

Question

Problem with setTimeout

Navigation

#1 by (1 votes)
#2 by (0 votes)

4

I did a function that updates a table and a graph with setTimeout () and it works perfectly.

The problem is that there are occasions (not always) that if I'm on another screen, I see ajax calls (I've reviewed it in the requests, on the networks screen, in the Google Chrome Developer option) that are in this function (without calling the function) and what I'm seeing disappears and I get the whole PHP response in case of not finding information in PHP.

This is my code.

var cronometro;
$(document).on('change','#select_export', function go_async()
{
    clearTimeout(cronometro);
    $("#answer").remove();
    $('#export_graph').html("");

        var exporte = $('select[name=select_export]').val();
        var exporte_graph = $('select[name=select_export]').val();
        $.ajax(
            {
            url:"phpFiles/finExport.php",
            method:"POST",
            data:{exporte:exporte},
            success:function(data)
            {
                $('#export_respose').html(data);
                $.ajax(
                    {
                    url:"phpFiles/finExport_chart.php",
                    method:"POST",
                    data:{exporte:exporte_graph},
                    success:function(datas)
                    {
                        var script=document.createElement('script');
                        script.type='text/javascript';
                        script.id='answer';
                        $("body").append(script);
                        $('#answer').html(datas);
                        $("#trigger").click();
                    }
                });
            }
        });
        cronometro = setTimeout(function(){ go_async(); }, 30000);
});

I've put clearTimeout(cronometro); to all my functions but still doing those things.

jquery html5 bootstrap ajax highcharts

asked by Alberto Siurob 13.10.2016 в 21:00

source

2 answers

Slowness in the simulator with Xcode 8 scroll zoom text

score 1 · Answer 1

Your problem resides in this line:

cronometro = setTimeout(function(){ go_async(); }, 30000);

You're doing the request again after 30 seconds and it's an infinite cycle that will continue to run.

Even if you have changed pages, it would be executed at least once, you could say that the function was saved in a memory space.

One possible solution is to remove this line clearTimeout(cronometro); and put it in the other views so you cancel the request when changing.

Edit

This example could be a simulation of what you want to do.

var cronometro;
$(function(){
  $('#fx input').on('focus',function myFuncion(){
    clearTimeout(cronometro);  
    console.log("Mi AJAX");
    cronometro = setTimeout(function(){
      myFuncion()
    },1000);
  });
  $('button').on('click', function(){
    clearTimeout(cronometro);
    $('#fx').css({'display':'none'});
    $('#fy').css({'display':'block'});
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="fx">
  <form id="x">
    <label>dato 1</label>
    <input type="text">
  </form>  
</div>
<div id="fy" style="display:none;">
  <form id="y">
    <label>dato 2</label>
    <input type="text">
  </form>  
</div>
<button>cambio vista</button>

score 0 · Answer 2

With $(window).on('blur', function(){}); you can reset the setTimeout when you see another page in a different tab.

That is, if the page loses the focus for in your case the setTimeout

var cronometro;

$(document).on('change', '#select_export', go_async);

function go_async() {

    // llamadas ajax
    cronometro = setTimeout(function() { go_async(); }, 30000);
}

$(window).on('blur', function(){

    clearTimeout(cronometro);
});

VIEW DEMO