javascript - Var 声明覆盖当前变量

Question

我需要一些帮助来理解我的 js 代码做错了什么。 基本上我有一个 Canvas 和一个在 Canvas 内弹跳的粒子。我想要的是用户在表单中输入数据并提交，然后粒子将以指定的值开始。

HTML 正文:

<canvas id="myCanvas" width="400" height="400"></canvas>

<form id="myForm" >


            X Initial: 
            <input type="text" id="xInit" name="xInit" />
            <br/>

            Y initial: 
            <input type="text" id="yInit" name="yInit" />
            <br/>

            X Velocity: 
            <input type="text" id="xDir" name="xDir" />
            <br/>

            Y Velocity: 
            <input type="text" id="xDir" name="yDir" />
            <br/>


            Change:
            <input type="submit" value="Submit">


</form>

粒子是它自己的类:

function particle(x, y, dX, dY) {
    this.x = x;
    this.y = y;
    this.dX = dX;
    this.dY = dY;
    this.check = checkCollision;
}

我初始化页面并使用 jquery 提交表单:

    $(document).ready(function(){
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext("2d");
        var HEIGHT = 400;
        var WIDTH = 400;
        var p1, xl, yl, xd, yd;
                   ...More code...
            $("form").submit(function(){
                xl = +$("#xInit").val();
                yl = +$("#yInit").val();
                xd = +$("#xDir").val();
                yd = +$("#xDir").val();
                p1 = new particle(xl,yl,xd,yd);
                init();
        });
    });

最后，我的 init() 函数调用函数 draw() 在设定的时间间隔内重新绘制粒子:

function init() {
    draw();
    alert(p1.x);
    return setInterval(draw, 10);
}

因此，当我单击“提交”时，最初一切正常，它会绘制粒子 1 次，然后永远消失。我相信这是因为 var p1, xl, yl, xd, yd; 不断重新声明自己。有没有解决的办法？或者有更好的方法来设置它？ 非常感谢。

<小时/>

更新

返回false；非常感谢部分工作

Answer 1

发生的情况是，当您点击“提交”时，您的表单就会被提交。这会刷新页面，并且您的变量会被重置。

您必须在 submit 处理程序中返回 false 以防止出现这种情况:

        $("form").submit(function(){
            xl = +$("#xInit").val();
            yl = +$("#yInit").val();
            xd = +$("#xDir").val();
            yd = +$("#xDir").val();
            p1 = new particle(xl,yl,xd,yd);
            init();
            return false; // <======
        });