Var声明覆盖当前变量

Question

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

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（）来重新绘制一组Interval上的粒子：

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

因此，当我点击提交时，所有内容都是最初的，它会将粒子绘制一次，然后它会永远消失。 我相信这是因为var p1，xl，yl，xd，yd; 不断重新宣布自己。 有没有解决的办法？ 或者更好的方法来设置它一般？ 非常感谢。

---

更新

返回虚假; 部分工作非常赞赏

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