再次调用setTimeout会停止第一个实例

I have a trivial little game I wrote in javascript that creates a wave from where you click. I figured out two ways to make the "wave" move across the screen:

我在javascript中编写了一个简单的小游戏,可以从你点击的位置创建一个wave。我想出了两种让“波浪”在屏幕上移动的方法:

by calling jQuery.animate() with increasingly large times. demo

通过越来越多的时间调用jQuery.animate()。演示

by recursvely calling setTimeout. demo

通过recursvely调用setTimeout。演示

The problem I have is that I want the behavior of 2 (columns all grow at the same speed with an offset timing) but with the action of 1 (subsequent clicking compounds the "waves" formed).

我遇到的问题是我想要2的行为(列都以相同的速度增长,偏移时间)但是动作为1(随后点击化合物形成“波浪”)。

Right now on the second demo, if you click again before the "wave" is finished, it immediately clears the setTimeouts and starts them all over again. I want to be able to stack them like in the first example.

现在在第二个演示中,如果在“wave”完成之前再次单击,它会立即清除setTimeouts并重新启动它们。我希望能够像第一个例子一样堆叠它们。

You can view the source of either of those pages to see the code (methods are getMouseXYUp and getMouseXYDown).

您可以查看其中任何一个页面的来源以查看代码(方法是getMouseXYUp和getMouseXYDown)。

the basic gist of what i am doing in the second demo is found in these two functions:

我在第二个演示中所做的基本要点是在这两个函数中找到:

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);
        }
    }

2 个解决方案

#1

The problem is that you're resetting the variables "left" and "right" as soon as the second mouse click happens. Is this any closer to what you're looking for?

问题是,只要第二次鼠标点击,您就会重置“左”和“右”变量。这有什么接近你想要的?

    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);
        }
    }

#2

Looking at the code, looks like you have issues with global variables. You would need to pass along left and right in the function calls and not have it in a global scope.

查看代码,看起来您遇到了全局变量问题。您需要在函数调用中向左和向右传递,而不是在全局范围内传递它。

#1