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]