呼び出しsetTimeout再度停止し最初のインスタンス

Question

いろ少しゲームに書いたjavascriptを生成する波から場所をクリックします。きっかけになるかもしれないと二つの"波"に移動し、画面:

1. を呼び出しjQuery.アニメーション()とますます大きます。 デモ
2. によるrecursvely呼び出しsetTimeout. デモ

問題は私がしたいの挙動の2(柱の全ての成長の速度とオフセットのタイミングでの1(その後のクリック化合物の"波"の形成).

現在のアップデートにコメントをクリックする前に、再度の"波"が完了したら、すぐにクリアにsetTimeoutsを開始しています。こういうことができるようにスタックのように最初の例です。

示できるソースのいずれかのページを参照のコード（法getMouseXYUpとgetMouseXYDown).

の基本的な概要のないということをデモが見つからこれら二つの機能

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

問題は、あなたが「左」の変数をリセットして、すぐに第二のマウスクリックが起こるように「右」しているということです。これは、任意のより近くにあるものを、あなたが探している？

    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

あなたはグローバル変数の問題を持っているように、

のコードを見てみると、見えます。あなたは、グローバルスコープでそれを持っているの関数呼び出しで、左右に沿って通過する必要はないでしょう。