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

我有一个用javascript编写的小游戏，可以在你点击的地方创建一个波浪。我想出了两种让“波浪”在屏幕上移动的方法：

调用jQuery.animate（）的时间越来越长

通过递归调用setTimeout 我的问题是，我想要2的行为（所有列都以相同的速度随偏移计时增长），但要1的行为（随后的单击使形成的“波”复合）

现在在第二个演示中，如果在“wave”结束之前再次单击，它会立即清除设置超时并重新启动。我希望能够像第一个示例中那样堆叠它们

您可以查看其中任何一个页面的源代码以查看代码（方法是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);
        }
    }

---

查看代码，似乎您在全局变量方面存在问题。您需要在函数调用中向左和向右传递，而不是在全局范围内传递。

问题是，您在第二次单击鼠标时就重置了变量“left”和“right”。这和你要找的更接近吗

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

函数getMouseXYUp（e）{ $（“body”）.die（'mousemove'）； var h=（document.height-e.pageY+17）； 左var=id-1； var-right=id+1； setTimeout（函数（）{moveleft（left，h）；}，100）； setTimeout（函数（）{moveright（right，h）；}，100）； 返回true； } ... 功能左移（左，h）{ 如果（左>=0）{ $（“#div”+左）。设置动画（{'height'：h}，400）； 左--； setTimeout（函数（）{moveleft（left，h）；}，50）； } } 功能右移（右，h）{ 如果（右