Question

由于外部js文件中的window.onload = function（）{}，onclick for stop不起作用。我试图阻止动画。在内部js文件中工作的代码是 var stop = setInterval（animate，60）; function stop（）{ clearInterval（停止）; } 如果我在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);
                    }
}

Answer 1

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

在onload

之外声明

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

内部更改

 var stop = setInterval(animate,60);

到

 intervalStop = setInterval(animate,60);

如果您不使用内联脚本并使用unobtrusive event listeners

，则不会遇到任何此类问题

由于window.onload = function（），onclick函数在内联脚本内部工作，但在外部js文件中不起作用。需要解决方法

1 个答案: