我的函数在 onclick 函数中不起作用答案

【问题标题】：My function doesn't work inside onclick function我的函数在 onclick 函数中不起作用
【发布时间】：2014-03-10 16:42:22
【问题描述】：

我尝试用画布编写钟摆模拟。我的目标是通过单击 Animate 按钮来更改开始角度，并通过单击停止来停止。但是 animate(a0deg) 和 clearInterval(id) 在 onClick 函数中不起作用。

如果我输入这些函数来控制台一切正常，它工作正常（例如我可以写 clearInterval(id); 并且动画将停止然后 animate(new_a0deg) 并且动画将以新的起始角度开始），但如果我将此函数放在 onClick 事件中 - 它不起作用。这真的很奇怪。任何想法如何解决它？请帮忙。谢谢。

顺便链接到jsbin：http://jsbin.com/pafoteku/2/edit（重要：在jsbin中它以另一种方式工作，不像在本地html文件中。这是另一件奇怪的事情。点击按钮后一切消失)。

这里有问题：

document.getElementById("animate").onclick = function () {
    //alert('onClick begin');
    clearInterval(id); // < - This doesn't work
    a0deg = document.getElementById("angle").value;
    animate(a0deg); // < - This doesn't work
    //alert('a0deg = '+a0deg);
};

document.getElementById("stop").onclick = function () {
    clearInterval(id); // < - This doesn't work
};

完整代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Pendulum</title>

<style >
canvas {
  background: #f0f0f0;
  border: 1px solid #ccc;
}

</style>
</head>
  <body>
    <form >
      <label>
        Angle:
        <input type="text" id="angle" name="angle" value="80" />
      </label>
      <button  id="animate" >Animate</button>
      <button id="stop" >Stop</button>
    </form>
    <canvas id="canvas" width="600" height="400">

  <script>
var a0deg = document.getElementById("angle").value;     //a0deg start angle (deg)
var id = null; //id of setInterval

function animate(a0deg) { 

    var canvas = document.getElementById('canvas');
    var ctx    = canvas.getContext('2d');

    var fps = 60;           //fps
    var f = 1000/fps;       //time between frames
    var t = 0;              //current time
    var l = 1;              //phisical length of pendulum

    var a0 = Math.PI*a0deg/180; //a0deg start angle (rad)

    var lCanvas = 300;      //pendulum length on canvas (px) 
    var g = 9.8 ;           //g

    function draw() {
        t += f / 1000;
        ctx.clearRect(0, 0, 600, 400);

        ctx.save();
        ctx.translate(300, 0);

        var theta = a0 * Math.cos(t/(Math.sqrt(l/g)))/Math.exp(t/10); 
        ctx.rotate(theta);

        ctx.strokeStyle = '#000'; /* нить */
        ctx.beginPath();
        ctx.moveTo(0, 0); 
        ctx.lineTo(0, lCanvas);
        ctx.lineWidth = 1;
        ctx.stroke();
        ctx.closePath(); 

        ctx.beginPath();         /* груз */
        ctx.arc(0, lCanvas, 5, 0, 2*Math.PI, false);
        ctx.fill();
        ctx.restore();
    }  
    id = setInterval(draw , f);
}

animate(a0deg); 

document.getElementById("animate").onclick = function () {
    //alert('onClick begin');
    clearInterval(id);
    a0deg = document.getElementById("angle").value;
    animate(a0deg); 
    //alert('a0deg = '+a0deg);
};

document.getElementById("stop").onclick = function () {
    clearInterval(id);
};

</script>
</body>
</html>

【问题讨论】：

尽量减少代码，去掉所有不属于问题的部分。让想要帮助您的用户更轻松。
另外，您是否打开了调试器（firebug 等）？你看到任何错误吗？您使用的是什么网络浏览器以及什么版本？
我已经在 Chrome 和 FF 的最新版本中尝试过。在调试器中没有任何错误。

标签： javascript function animation canvas onclick

【解决方案1】：

Demo

使用

<button type="button" id="animate">Animate</button>
<button type="button" id="stop">Stop</button>

或

<input type="button" id="animate" value="Animate" />
<input type="button" id="stop" value="Stop" />

请注意，除非您使用type="button"，否则<button> 元素在某些浏览器中可能会出现错误。

在这种情况下，它们的行为类似于提交按钮，因此它们发送表单，重新加载页面。

那么，避免该问题的另一种方法是使用

button.onclick = function (e) {
    /* Click event handler */
    e && e.preventDefault && e.preventDefault();
    return false;
};

e.preventDefault 阻止发送表单。请注意，不支持它的旧浏览器可能需要非标准 (DOM0) return false。

【讨论】：

谢谢！但是还是不确定是否理解 e && e.preventDefault && e.preventDefault();
@Vega 这是if(e && e.preventDefault){e.preventDefault();} 的缩写。如果您不关心旧浏览器抛出错误，您可以使用e.preventDefault()，因为它们没有实现它。

【解决方案2】：

尝试添加

return false;

在您的 onclick 代码的末尾。

【讨论】：

有效！谢谢！但为什么？？？我花了两天时间了解原因，仍然不明白。
stackoverflow.com/questions/128923/…
你可以看到 Oriol 的回答。他的回答很清楚。

【解决方案3】：

另一个解决方案是不使用表单按钮并跳过所有浏览器/表单怪癖。制作自己的按钮，一切正常。这是我对您的代码所做的所有更改：

<div id="animate" style="background-color: gray; cursor: pointer;">Animate</div>
<div id="stop"    style="background-color: gray; cursor: pointer;">Stop</div>

我相信您可以添加 CSS 样式并使它们更漂亮。

【讨论】：