Question

任何人都可以帮助我使用clearInterval吗？我已经使用了几个小时，似乎无法让它工作。我使用的代码与W3学校的代码非常相似，如下所示：

以下是查看实际操作的链接：http://hyque.com/ani/drawImageBtn.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DrawImage with Buttons</title>
</head>

<body>

<button id="startBtn">Start</button>
<button id="stopBtn">Stop</button><br />

<canvas id="myCanvas" width="125" height="187" style="border:1px solid       #d3d3d3;">

<script>


window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "http://hyque.com/ani/adam.png";  
var xPos = 0;

ctx.drawImage(img, 0, 0, 120, 182, 0, 0, 120, 182);

var el = document.getElementById('startBtn');
el.addEventListener('click', strt, false);

var el2 = document.getElementById('stopBtn');
el2.addEventListener('click', stopIt, false);

function imageXPosition() {


ctx.clearRect(0, 0, 120, 182);  // This clears the canvas

ctx.drawImage(img, xPos, 0, 120, 182, 0, 0, 120, 182); //Draws the  individual frames


xPos += 120; //adds the width

//This adds 1 to the second frame
if(xPos == 120){
    xPos += 1;
} 
if(xPos > 841){xPos = 0;}   // This resets to 0 after the las frame


}
function strt(){
var intStp = setInterval(imageXPosition, 200);

}
function stopIt(){
    clearInterval(intStp);
}   
}

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

Answer 1

您可以查看范围界定：

 var intStp;
 function strt(){ 
 intStp = setInterval(imageXPosition, 200); 
} 
function stopIt(){ 
clearInterval(intStp);
 }

函数内部的变量只有在函数结束时才存在，除非它没有绑定到内部函数（参见Closure）。

function(){
var a;//a is declared
 }
 //a is deleted

函数无法访问其他函数属性，除非它正在访问外部函数的变量。

您可以阅读MDN：JS范围，功能，变量（主要是：基础知识）

Answer 2

本地范围启动函数中的IntStp变量。只需省略var关键字

即可

Javascript - clearInterval

2 个答案: