Aufruf SetTimeout stoppt wieder erste Instanz

Question

Ich habe ein triviales wenig Spiel, das ich in Javascript geschrieben, das eine Welle erzeugt, von wo aus Sie klicken. Ich fand heraus, zwei Möglichkeiten, die „Welle“ Bewegung über den Bildschirm zu machen:

1. durch jQuery.animate () mit immer größeren mal anrufen. Demo
2. durch recursvely SetTimeout aufrufen. Demo

Das Problem, das ich habe ist, dass ich das Verhalten von 2 will (Spalten wachsen alle mit der gleichen Geschwindigkeit mit einem Offset-Timing), aber mit der Wirkung von 1 (nachfolgenden Klickverbindungen der „Wellen“ gebildet wird).

Im Moment auf der zweiten Demo, wenn Sie erneut auf, bevor die „Welle“ beendet ist, löscht sie sofort die setTimeouts und beginnt sie wieder von vorn. Ich möchte, dass sie in der Lage sein zu stapeln wie in dem ersten Beispiel.

Sie können die Quelle eine der beiden Seiten sehen Sie den Code zu sehen (Methoden sind getMouseXYUp und getMouseXYDown).

die grundlegenden Kerne von dem, was ich in der zweiten Demo machte in diesen beiden Funktionen gefunden:

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

Das Problem ist, dass Sie die Variablen „links“ sind das Zurücksetzen und „rechts“, sobald der zweite Mausklick geschieht. Ist dies näher zu dem, was Sie suchen?

    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

auf dem Code Sehen, sieht aus wie Sie Probleme mit globalen Variablen haben. Sie würden entlang nach links und rechts in den Funktionsaufrufen übergeben müssen und hat es nicht in einem globalen Bereich.