2016-12-25 5 views
-1

Kann mir jemand mit clearInterval helfen? Ich habe stundenlang damit gearbeitet und kann es scheinbar nicht zur Arbeit bringen. Ich bin mit einem sehr ähnlichen Code zu dem, was ich auf W3 Schulen gefunden wie folgt:Javascript - clearInterval

Hier ist auch ein Link in Aktion zu sehen: 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> 
+0

"var intStp" ist lokal beschränkt nur innerhalb 'strt()'. Sie können nicht außerhalb dieser Funktion darauf zugreifen. – charlietfl

Antwort

2

Sie können einen Blick auf Scoping haben:

Eine Variable innerhalb einer Funktion existiert nur bis zum Ende der Funktion, sofern sie nicht an innere Funktionen gebunden ist (siehe Closure).

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

Und Funktionen können nicht auf andere Funktionseigenschaften zugreifen, außer wenn sie auf eine Variable einer äußeren Funktion zugreifen.

Sie auf MDN lesen können: JS Scoping, Funktionen, Variablen (vor allem: die Grundlagen)

+0

Das hat funktioniert. Danke vielmals. Ich habe mich gefragt, ob es ein Problem mit dem Oszilloskop war. Ich denke, es ist alles Teil des Lernprozesses. –

+0

Zum Lernfortschritt: bitte als Antwort markieren;) (um anderen Helfern zu sagen, dass du schon zufrieden bist ...) –

-1

IntStp Variable in der Funktion lokaler Bereich Start. Lassen Sie einfach das var Schlüsselwort

+0

Kein eleganter Weg, übrigens ... –

+0

Das ist eine schlechte Übung. Sollte immer Variablen in ihrem angemessenen Umfang deklarieren – charlietfl

Verwandte Themen