由于 window.onload = function()，onclick 函数在内联脚本中而不是在外部 js 文件中有效。需要解决方法答案

【问题标题】：The onclick function works when inside an inline script but not in external js file due to window.onload = function(). Require workaround由于 window.onload = function()，onclick 函数在内联脚本中而不是在外部 js 文件中有效。需要解决方法
【发布时间】：2017-05-03 23:18:18
【问题描述】：

由于外部 js 文件中的 window.onload = function(){}，onclick for stop 不起作用。我正在尝试停止动画。在内部 js 文件中工作的代码是 var stop = setInterval(animate,60); 函数停止（）{ 清除间隔（停止）； } 如果我在 window.onload 之外编写代码，则它无法引用其中的 animate 函数。下面给出了 html 文件以及外部 js 文件。

<!doctype HTML>
<html lang="en">
<head>
        <meta charset="utf-8">
        <title>Cable Car</title>
        <meta name="Description" content="Using Canvas">
        <meta name="robots" content="noindex">
        <!-- This is a HTML Comment -->
        <!-- Below is the HTML Shim that uses a conditional comment -->
        <!--[if lt IE 9]> <script src="dist/html5shiv.js"></script><![endif]-->
        <script src="scripts/stackoverflow.js" type="text/javascript"></script>
        <style>
        .leftBar {
        width: 15%;
        height: 80%;
        float: left;
        }
        .middleBar {
        width: 60%;
        height: 80%;
        float: left;
        margin: 20px;
        }
        </style>
</head>
<body>
        <header role="banner">
            <h1>Canvas and animation</h1>
            <hr>
        </header>
        <aside role="complementary" class="leftBar">
            <button id="stop" onclick="stop()" >Stop</button>
            <p>Stop the animation</p>
        </aside>
        <main>
        <article class="middleBar">
            <canvas id="canvas" width="650" height="350"></canvas>
        </article>
        </main>

<footer role="contentinfo">
<hr>
<p><small>
Copyright &copy;2016. All rights reserved</small>
</p>
</footer>
</body>
</html>

下面是外部js文件

window.onload = function(){         
            var cnv = document.getElementById('canvas');
            var ctx = cnv.getContext('2d');

            //the image object being created and loaded
            var pict = new Image();
            pict.src = "images/cablecar23.png";
            pict.onload = function(){
            ctx.drawImage(pict,0,-10,pict.width*0.25,pict.height*0.25);
            }

            //the moving image
            x = 0;
            y = -17;
            /*this change  variable determines how far the car moves in a redraw and direction */                       
            change = 2;
            //width and height are dimensions of the box
            w = 650;
            h = 100;

            function animate() {
                    ctx.clearRect(0, 0, w, h);
                    ctx.drawImage(pict, x, y,pict.width*0.25, pict.height*0.25);
                    //checking cable car position
                    if(x >=630) { 
                    //if thecar is on extreme right then it exits the screen
                        change = 0; 
                    }
                    //update horizontal position
                    x = x + change;
            }
                    //cause function to repeat with milliseconds
                    //calling the animate function to start the cable car
                    var stop = setInterval(animate,60);
                    //below function is not referenced
                    function stop(){
                    clearInterval(stop);
                    }
}

【问题讨论】：

标签： javascript html animation canvas

【解决方案1】：

更改变量 stop 的名称，使其与函数名称不同

在onload外部声明两者

 var intervalStop; 
 function stop(){
      clearInterval(intervalStop);
 }

内部 onload 变化

 var stop = setInterval(animate,60);

到

 intervalStop = setInterval(animate,60);

如果您不使用内联脚本并使用unobtrusive event listeners，您将不会遇到任何问题

【讨论】：

感谢您的及时答复。我完全按照建议做了。但是，停止仍然不起作用，尽管没有控制台错误。完全没有错误。
创建一个重现问题的演示......在 jsfiddle.net、plunker、codepen 等沙箱中
这是我的 jsfiddle。我已将图像更改为红球，否则其余代码与您的建议完全相同。 jsfiddle.net/spkl/6cctu18n/2
因为您在onload 内重新声明了一个新的var。删除var，使其成为同一个变量。 jsfiddle.net/6cctu18n/3
我的回答有误吗...我道歉