Gracias, no consigo el efecto deseado aunque me ha sido de ayuda tus respuestas. Lo que quiero es que si hay un setInterval en ejecución y hago otra llamada a esa función, la variable inc al estar ya declarada hace saltos desde 0 hasta el último número que contó en el momento que se vuelve a hacer la llamada a la función con el evento onclick.
He probado con las famosas callbacks que hasta el momento no las conocía, pero tampoco he podido solucionarlo. No sé, si me explico lo que te quiero decir. Te dejo un código funcional donde la función va imprimiendo el incremento dentro de un elemento html, con esto será mucho mas visual.
Código HTML:
Ver original<!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"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript">
function pelicula(elm,jumpPx,spriteHeight,duration){
var inc=0;
var time=setInterval(function(){
if(inc<spriteHeight){
inc+=jumpPx;
//elm.style.backgroundPosition='0px -'+inc+'px';
elm.innerHTML=inc;
}else{
clearInterval(time);
elm.style.backgroundPosition='0px -0px';
}
},duration);
}
<p onclick="pelicula(this,1,1000,1000)">tiempo1
</p> <p onclick="pelicula(this,1,1000,1000)">tiempo2
</p>
Fíjate que cuando das el primer click funciona perfectamente, pero al accionarlo nuevamente se pierde totalmente la constancia de los números.