4

Hice una función que actualiza una tabla y una gráfica con setTimeout() y funciona perfecto.

El problema es que hay ocasiones (no siempre) que si estoy en otra pantalla, me aparecen las llamadas de ajax (Lo he revisado en los requests, en la pantalla de networks, en la opción Developer de Google Chrome) que estan en dicha función (sin mandar a llamar la función) y lo que estoy viendo desaparece y me aparece todo la respuesta del PHP en caso de no encontrar información en el PHP.

Este es mi código.

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);
});

Le he puesto clearTimeout(cronometro);a todas mis funciones pero aún así haciendo esas cosas.

2
  • Que es exactamente lo que quieres conseguir? En cuando no estés en la pantalla que no vuelva a cargar? O en cuando haya recibido la respuesta del segundo ajax que termine el loop del settimeout? Commented el 13 oct. 2016 a las 19:42
  • De hecho que siga refrescando mientras esté en la página "x.html" pero si cambio a "y.html" que pare el cronómetro. Commented el 13 oct. 2016 a las 20:25

2 respuestas 2

1

Tu problema reside en esta linea:

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

estas volviendo a hacer la peticion después de haber pasado 30 segundos y es un ciclo infinito que se seguirá ejecutando.

Aun así hayas cambiado de pagina se ejecutaría al menos 1 vez, se podría decir que la función se quedo guardada en un espacio de memoria.

Una solución posible es quitar esta linea clearTimeout(cronometro); y ponerla en las otras vistas así cancelas la peticion al cambiar.


Edición

Este ejemplo podría ser una simulación de lo que quieres hacer.

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>

3
  • Así lo tengo en las demás funciones y vistas tengo clearTimeout(cronometro); pero sigue sin funcionar. De hecho la línea está bien, quiero que se repita tantas veces siempre y cuando este en la pantalla x.html, si cambia a y.html que el cronometro pare. Commented el 13 oct. 2016 a las 20:26
  • @AlbertoSiurob para cambiar de pagina utilizas algún link? ejemplo: <a href="y.html">otra pagina</a>, si usas algo así puedes poner un onClick="javascript:clearTimeout(cronometro);" y creo de este modo se cancelaria
    – JuankGlezz
    Commented el 13 oct. 2016 a las 22:12
  • No, digo a cambio de vista, perdón por no darme a entender, el boton X me trae un formulario, el botón Y me trae otro formulario. Cuando aprieto X y me trae el formulario y entra el setTimeout correctamente. Pero cuando aprieto Y quiero que se cancele el conteo, que ya no refresque más. Cuando estoy en el formulario del boton Y aveces manda a llamar al AJAX :( Commented el 13 oct. 2016 a las 22:21
0

Con $(window).on('blur', function(){}); puedes resetear el setTimeout en cuando veas otra pagina en una pestaña diferente.

Es decir si la pagina pierde el focus para en tu caso el 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);
});

VER DEMO

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.