Ergebnis 1 bis 5 von 5
  1. #1
    JohannesV ist offline Grünschnabel
    registriert
    14-10-2014
    Beiträge
    8

    setInterval und clearInterval in verschiedenen Funktionen kombinieren

    Liebe Forumsbesucher und Moderatoren,

    nachdem Ihr mir letztens sehr schnell und freundlich geholfen habt , habe ich hier eine weitere Frage, die ich auch mit hartnäckigen Versuchen nicht selbst lösen konnte.
    Ich möchte, dass während des Drückens einer Taste etwas regelmäßig geschieht (zum Beispiel, dass sich ein Cursor gleichmäßig bewegt). Nach meinen JavaScript-Kenntnissen geht das, indem bei onkeydown ein setInterval eingerichtet wird und bei onkeyup ebendieses durch clearInterval aufgelöst wird. Eine Variable namens "Aktiviert" sorgt dafür, dass setInterval bei onkeydown auch bei langem Drücken nur einmal gemacht wird (ich glaube, man nennt so etwas flag).
    Ich versuchte es wie folgt:
    Code:
    var Aktiviert = false;
    
    document.body.onkeydown = function (event) {
    var Richtung = event.keyCode;
    if (Richtung == 37) { //Linkspfeil wurde gedrückt
    if (Aktiviert == false) { //Bei langem Drücken nur einmal setInterval machen
    var Regel = setInterval(function() {Bewegung()}, 40);
    return Regel;
    Aktiviert = true; return Aktiviert;}}}
    
    document.body.onkeyup = function (event) {
    var Richtung = event.keyCode;
    if (Richtung == 37) { //Linkspfeil wurde wieder losgelassen
    clearInterval(Regel);
    Aktiviert = false; return Aktiviert;}}
    
    function Bewegung () {
    var Cursor = document.getElementById('Cursor');
    Cursor.style.left = Number(Cursor.style.left.replace('px',''))-8+'px';} //Alle 40ms geht der Cursor 8px nach links.
    Doch onkeyup funktioniert nicht. Ich nehme an, dass var Regel nicht richtig übergeben wird, sodass dem Browser bei onkeyup nicht bewusst ist, auf was sich clearInterval bezieht. Habe ich einmal die Pfeiltaste gedrückt, geht der Curser auch nach Loslassen der Taste immer weiter. Eigentlich sollte der Cursor nach dem Loslassen der Pfeiltaste stehen bleiben. Wie kann ich es lösen, dass in der Funktion onkeydown {} ein setInterval bestimmt und genau dieser Timer in der Funktion onkeyup {} wieder beendet wird?

    Ich habe im Forum intensiv gesucht, ob die Frage schon einmal so oder so ähnlich gestellt wurde, und nichts gefunden. Falls doch schon Antworten existieren, bitte ich um einen kurzen Verweis.
    Vielen Dank für Eure Hilfe!

    Johannes

  2. #2
    CT24 ist offline Grünschnabel
    registriert
    14-11-2014
    Beiträge
    5

    AW: setInterval und clearInterval in verschiedenen Funktionen kombinieren

    Du musst einfach eine Globale Variable erstellen in die du das Interval nacher rein haust also var Regel muss über den beiden Funktionen stehen. In den Funktionen reicht es dann wenn du Regel = setInterval....blablabla benutz. Zum lesen - JavaScript: Globale und lokale Variablen definieren - Matthias Schütz

  3. #3
    Sempervivum ist offline Banned
    registriert
    11-12-2012
    Beiträge
    555

    AW: setInterval und clearInterval in verschiedenen Funktionen kombinieren

    Das Problem ist, dass die Variable Regel innerhalb der anonymen Funktion bei keydown definiert wird. Außerhalb ist sie deshalb nicht sichtbar. Um das Problem zu lösen, musst Du diese Variable außerhalb der Funktion definieren.

  4. #4
    JohannesV ist offline Grünschnabel
    registriert
    14-10-2014
    Beiträge
    8

    AW: setInterval und clearInterval in verschiedenen Funktionen kombinieren

    Herzlichen Dank an CT24 und Sempervivum!
    Zwei simple Antworten, eine simple Lösung - und schon funktioniert es. Dabei hat es mir gut getan, dem Link zu folgen und noch einmal den Unterschied zwischen lokaler und globaler Variable nachzulesen.

    Noch ein Hinweis: Der Code funktionierte erst, als ich "return Regel" entfernte. Diese Aussage war aber für die Funktion offenbar nicht nötig. Durch Ausprobieren habe ich gemerkt, dass es auch ohne "return Aktiviert" geht.

    Wie kann ich bei meiner Frage den Status auf "gelöst" setzen?

  5. #5
    j-l-n Guest

    AW: setInterval und clearInterval in verschiedenen Funktionen kombinieren

    Zitat Zitat von JohannesV Beitrag anzeigen
    Wie kann ich bei meiner Frage den Status auf "gelöst" setzen?
    Erledigt.

    PS: du solltest deinen Code unbedingt strukturieren und vernünftig einrücken!
    PPS: Variablen und Funktionsnamen werden, sofern sie kein Konstruktor sind, im Allgemeinen klein geschrieben. Diese Namenskonvention wird auch im JS-Core verwendet und von vielen benutzt; daher erleichtert sie das Verstehen des Codes.
    PPPS: var Regel = setInterval(function() {Bewegung()}, 40); kann man noch verbessern und verkürzen: var Regel = setInterval(Bewegung, 40);
    PPPPS: statt Number() sollte man besser parseInt() verwenden.
    PPPPPS:
    Zitat Zitat von CT24 Beitrag anzeigen
    Du musst einfach eine Globale Variable erstellen in die du das Interval nacher rein haust
    Generell sind globale Variablen eine sehr schlechte Idee und man sollte sie unbedingt vermeiden. Brauchen tust du sie außerdem nicht; die Variable muss sich lediglich im zugreifbaren Scope befinden:
    Code:
    	var moveCursor = function moveCursor(ev) {
    		if (ev.keyCode === 37) { //Linkspfeil wurde gedrückt
    			var move = setInterval(function() {
    				var cursor = document.getElementById('cursor');
    				cursor.style.left = parseFloat(cursor.style.left, 10) + 8 + "px";
    			}, 40);
    			document.onkeydown = null;
    		}
    		document.onkeyup = function(ev) {
    			if (ev.keyCode === 37) { //Linkspfeil wurde wieder losgelassen
    				clearInterval(move);
    				document.onkeydown = moveCursor;
    			}
    		};
    	};
    	document.onkeydown = moveCursor;


    Übrigens: Eigentlich brauchst du gar kein Interval:
    HTML-Code:
    <script src="https://raw.githubusercontent.com/j-l-n/jln.js/master/jln.js"></script>
    <script src="https://raw.githubusercontent.com/j-l-n/jln.js/master/modules/jln.event.js"></script>
    
    <script>
    ready(function(){
    	var cursor = document.getElementById('cursor');
    	jln.event.bind("keydown", function(ev){
    		if(ev.keyCode === 39){ //nach rechts schieben
    			var marginLeft;
    			if(cursor.style.left === ""){
    				marginLeft = "5px";
    			}
    			else{
    				marginLeft = parseFloat(cursor.style.left, 10) + 5 + "px";	
    			}
    			cursor.style.left = marginLeft;
    		}
    	});
    });
    </script>
    
    <div style="background-color:red;position:absolute;width:20px;height:20px;" id="cursor"></div>

Ähnliche Themen

  1. Antworten: 0
    Letzter Beitrag: 22-08-2013, 13:58
  2. Mehrere Funktionen mit setInterval gleichzeitig?
    Von Sphere im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 17-09-2011, 00:54
  3. Probleme Mit setInterval, clearInterval greift nicht
    Von Jonny2009 im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 15-02-2009, 23:03
  4. Antworten: 2
    Letzter Beitrag: 07-08-2008, 12:46
  5. Antworten: 2
    Letzter Beitrag: 08-11-2007, 18:54

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •