detener funcion set interval

kalvinman · #1 (**permalink**) 03/05/2012, 18:41

Hola amigos, veran en mi pagina puse un div que se recarga automaticamente cada 5 segundos con este codigo

Código Javascript:

Ver original$(document).ready(function() {
     $('#banner').fadeIn(1000);
     $("#banner").load("sis-rota.php");
   var refreshId = setInterval(function() {
      $('#banner').fadeOut(1000);
      $("#banner").load('sis-rota.php?next=1');
      $('#banner').fadeIn(1000);
   }, 5000);
   $.ajaxSetup({ cache: false });
});

Pero quiero poner un botón en mi pagina que detenga o anule la funcion set interval para que cuando se pulse deje de recargarse automaticamente.

como lo hago?

chinanzio · #2 (**permalink**) 03/05/2012, 18:47

Código Javascript:

Ver originalclearInterval(refreshId);

kalvinman · #3 (**permalink**) 03/05/2012, 19:19

como llamaría eso desde un link???

chinanzio · #4 (**permalink**) 03/05/2012, 19:52

podrías poner la variable refreshId como global y

Código HTML:

Ver original<a onclick="javascript:clearInterval(refreshId);">texto del link</a>

o llamar a una función que se encargue de obtener refreshId

kalvinman · #5 (**permalink**) 03/05/2012, 19:58

ya lo he intentado así y no funciona.

chinanzio · #6 (**permalink**) 03/05/2012, 20:06

kalvin ...

Código HTML:

Ver original<script>
function stopInterval() {
    clearInterval(refreshId); // refresh tiene que ser global
}
</script>
<body>
    <a onclick="stopInterval();" >click aquí</a>
</body>

kalvinman · #7 (**permalink**) 03/05/2012, 20:14

Asi lo tengo

Código Javascript:

Ver originalfunction cambiarota() {
        clearInterval(refreshId);
}

y llamo

Código HTML:

Ver original<a href="javascript:cambiarota();">Detener</a>

Pero sigue sin funcionar.

chinanzio · #8 (**permalink**) 03/05/2012, 20:27

Lo importante es que refreshId esté en el mismo ámbito que la función

he visto que tienes la declaración dentro del ready de jQuery, sacala de ahi y es probable que funcione

una cosa asi :

Código Javascript:

Ver originalvar refreshId = null;
$(document).ready(function() {
    $('#banner').fadeIn(1000);
    $("#banner").load("sis-rota.php");
    refreshId = setInterval(function() {
        $('#banner').fadeOut(1000);
        $("#banner").load('sis-rota.php?next=1');
        $('#banner').fadeIn(1000);
    }, 5000);
    $.ajaxSetup({
        cache : false
    });
});
 
function cambiarota() {
    clearInterval(refreshId);
}

Código HTML:

Ver original<a href="javascript:cambiarota();">Detener</a>

kalvinman · #9 (**permalink**) 03/05/2012, 21:42

Perfecto amigo, muchas gracias. xD