Problemas con detener reload con pauseInterval

daniiable · #1 (**permalink**) 17/04/2016, 07:57

Tengo un javascript el cual al pasar el mouse sobre el DIV counter detiene un conteo (y en teoría el refresh) y al salir continua contando y en teoría ejecutando el cronometro del refresh.

El problema es que si inicia el conteo e incluso al pasar el mouse sobre el DIV si detiene la ejecución del reload pero al quitar y poner nuevamente el mouse este continua el refresh y lo que quiero es que al poner el mouse se ponga en pausa el refresh y al quitar se ejecute pero si vuelves a poner el mouse encima este se cancele continuando la edición del documento que este en iframe.

Este es mi código:

Código HTML:

[HIGHLIGHT="Javascript"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Busqueda</title>
<link href="../css/paginas.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <!-- you'll need jQuery for this. If you really want a vanilla version, ask -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="counter">
Última actualización: <script> 
miFecha = new Date() 
document.write(miFecha.getHours() + ":" + miFecha.getMinutes() + ":" + miFecha.getSeconds()) 
</script>, hace <span id="showCount"> </span> minutos
<p></p>
<span id="counting"> </span>

<iframe name="llamadas" src="mipagina.html" width="100%" height="600"></iframe>
</div>

<script type="text/javascript">
var i = 0;
window.setInterval(function() { //declare new function
  if(!$('#counter').hasClass('pauseInterval')) { //only run if it hasn't got this class 'pauseInterval'
    $('#showCount').html(i++); //just for explaining and showing
  }
}, 500);

$('#counter').hover(function() { //mouse enter
    $(this).addClass('pauseInterval');
    $('#counting').text('La actualización es cada 5 min.');
  },function() { //mouse leave
    $(this).removeClass('pauseInterval');
	    setTimeout(function () {
        window.location.reload()
    }, 3000);
    $('#counting').text('Actualización en proceso, guarda tus cambios.');
  }
);

    </script>
</body>
</html>

[/HIGHLIGHT]

PIRRUMAN · #2 (**permalink**) 18/04/2016, 08:58

que tal , se me ocurre que podrias poner un campo como bandera , para ver si esta en proceso o no , y asi ejecutar la actualizacion o no

Código Javascript:

Ver original<input type="text" value="1" id="bandera">
var bandera = $("#bandera").val();
if(bandera.val()==='1'){
$(this).removeClass('pauseInterval');
        setTimeout(function () {
        window.location.reload()
    }, 3000);
    $('#counting').text('Actualización en proceso, guarda tus cambios.');
$("#bandera").val('2');
}