Gracias @ocp001a y @Alexis88 por su sugerencia, no se si soy irremediablemente torpe en JS pero no logro me funcione, de hecho... ahora tengo un nuevo problema y es que se pierde el valor de la variable i entre invocacion e invocacion y entonces el contar no avanza... y creo me falta crear un closure para mantenerlo
Sera que me iluminan con su conocimiento del lenguaje ?
Código Javascript
:
Ver original<html>
<head>
<title>No molestar!</title>
<style>
body {background-color: #000;}
h1 {color: white;}
#moverDiv
{
width:350px;
height:350px;
background-image: url("images/caminante.jpg");
border: red 2px;
position:relative;
}
</style>
</head>
<body>
<h1> No me molestes </h1>
<div id = "moverDiv"></div>
<script>
// @author: Pablo Bozzolo
function moveMeHor(elem,cant,smooth)
{
smooth = smooth || false;
console.log('In');
//elem.removeEventListener('mouseover',miHandler,false);
if (!smooth){
elem.style.left = cant;
return;
}
(function(){
i = 0;
inter = setTimeout(function()
{
console.log(i);
if (i>cant)
{
i=0;
}
if (i==cant)
{
//clearTimeout(inter);
//div.addEventListener ('mouseover',miHandler,false);
}
elem.style.left = i;
i++;
},1);
})();
}
window.onload = function()
{
div = document.getElementById('moverDiv');
miHandler = function(){moveMeHor(div,500,true);};
miHandler2 = function(){console.log('removiendo handler1'); div.removeEventListener('mouseover',miHandler,false);};
// espero un tiempito segundo antes de registrar el mouseover
setTimeout(function(){
div.addEventListener ('mouseover',miHandler,false);
//div.addEventListener ('mouseout',miHandler2,false);
},500);
}
</script>
</body>
</html>