setTimeout llamar de nuevo se detiene primera instancia

Question

Tengo un pequeño juego trivial he escrito en JavaScript que crea una onda desde donde se hace clic. Me di cuenta de dos maneras de hacer el movimiento "ola" a través de la pantalla:

1. llamando jQuery.animate () con cada vez más grandes tiempos. demostración
2. llamando recursvely setTimeout. demostración

El problema que tengo es que quiero el comportamiento de 2 (columnas todos crecen a la misma velocidad con un desfase de sincronismo), pero con la acción de 1 (clic posterior compuestos los "ondas" formado).

En este momento en el segundo demo, si hace clic de nuevo antes de la "ola" está terminado, se aclara de inmediato los setTimeouts y les comienza de nuevo. Quiero ser capaz de apilar ellos como en el primer ejemplo.

Puede ver el origen de cualquiera de esas páginas para ver el código (métodos son getMouseXYUp y getMouseXYDown).

la esencia básica de lo que estoy haciendo en la segunda demostración se encuentra en estas dos funciones:

function getMouseXYUp(e) {
            $("body").die('mousemove');

            h = (document.height - e.pageY + 17);
                left = id-1;
                right = id+1;
            setTimeout("moveleft()", 100);
            setTimeout("moveright()", 100);

            return true
        }

function moveleft(){
        if (left >= 0){
            $("#div"+left).animate({'height': h}, 400);
            left--;
            setTimeout("moveleft()", 50);
        }
    }

Answer 1

El problema es que se está restableciendo las variables de "izquierda" y "derecha" tan pronto como el segundo clic del ratón pasa. Es esta más cerca de lo que estás buscando?

    function getMouseXYUp(e) {
        $("body").die('mousemove');

        var h = (document.height - e.pageY + 17);
        var left = id-1;
        var right = id+1;
        setTimeout(function() { moveleft(left, h); }, 100);
        setTimeout(function() { moveright(right, h); }, 100);

        return true;
    }

    ...

    function moveleft(left, h) {
        if (left >= 0){
            $("#div"+left).animate({'height': h}, 400);
            left--;
            setTimeout(function() { moveleft(left, h); }, 50);
        }
    }

    function moveright(right, h) {
        if (right < divs){
            $("#div"+right).animate({'height': h}, 400);
            right++;
            setTimeout(function () { moveright(right, h); }, 50);
        }
    }

Answer 2

Si examina el código, parece que tiene problemas con las variables globales. Usted tendría que pasar a lo largo de izquierda a derecha en las llamadas a funciones y no tenerlo en un ámbito global.