代码之家 › 专栏 › 技术社区 › helloandre

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

settimeout jquery javascript

helloandre · 技术社区 · 15 年前

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

调用jQuery.animate()的时间越来越长。 demo
通过递归调用setTimeout。 demo

现在在第二个演示中,如果在“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);
        }
    }

2 回复 | 直到 15 年前

edsoverflow 15 年前

问题是,当第二次鼠标单击时,您正在重置变量“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);
        }
    }

epascarello 15 年前

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

3 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

3 月前

Alex · 在轻量级中同时解构和不解构变量

3 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

3 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

3 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

3 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

3 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

4 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

4 月前