Eventlistener, Funktion ausführen, wenn Zeitspanne > Wert

[Lila]

Hallo,

schön, dass du trotz des wirren Betreffs meinen Beitrag angeklickt hast :)

Ich habe in Javascript zwei Eventlistener, welche über die Library Motion.js überwachen, wenn mein Smartphone geschüttelt wird bzw. das Schütteln beendet wird.

Das Beispiel von der motion.js-Startseite:

//Detect when the user is shaking their device  
window.addEventListener("shakestart", function(){  
	//Make the background a nice pink!  
	document.body.style.background = "#ff00ff";  
}, false);  
  
//Detect when the user has stopped shaking their device  
window.addEventListener("shakeend", function(){  
	//Remove the horrible pinkness!  
	document.body.style.background = "none";  
}, false);

funktioniert soweit. Mich stört jedoch, dass "shakestart" schon bei der kleinsten Bewegung ausgeführt wird. Deshalb habe ich mir gedacht, dass ich die Zeitdifferenz zwischen dem "shakestart-Event" (Handy wird bewegt) und dem "shakeend-Event" (Handy ruht) nehme und eine Funktion erst dann ausgeführt wird, wenn diese größer als bspw. 3 Sekunden ist (das Handy also 3 sek. am Stück gerüttelt wurde).

Theoretisch ganz einfach, aber praktisch für mich auch nach 3 Std. Try-And-Error noch ein ungelöstes Problem.

Die Startzeit konnte ich noch ermitteln.

window.addEventListener("shakestart", function(){  
// Startzeit ermitteln  
var startZeit = new Date();  
			  
//Testausgabe  
alert(startZeit.getTime();  
}, false);

Im gleichen Stil könnte ich auch die Endzeit für sich allein ermitteln. Aber wie bekomme ich es hin, dass der zweite Eventlistener "shakeend" nur ausgeführt wird, wenn "shakestart" schon gestartet ist. Ich habe versucht den Eventlistener innerhalb der Startfunktion einzubauen, aber da funktioniert der Eventlistener scheinbar nicht, zumindest wird in der Praxis dessen Funktion nicht aufgerufen.

Ein weiterer Versuch war, die jeweilen Startzeiten mit return auszugeben, dann die Differenz  zu nehmen und über if bei einer gewissen Differenz eine Funktion auszuführen, aber das haute auch nicht hin. Die eventlistener schienen garnicht mehr zu funktionieren, wenn ich diese in der Art var startzeit = window.addEventListener(...) { ... return zeit} eingebaut habe. Irgendwie bin ich dann auch immer an einen Punkt angekommen, wo die Funktion sich immer wieder hätte selbst aufrufen müssen.

Ich bin wirklich für jeden Hinweis dankbar, wie ich das Problem lösen kann.

Vielen Dank :)

[Gast]

Die Startzeit konnte ich noch ermitteln.

window.addEventListener("shakestart", function(){

// Startzeit ermitteln
var startZeit = new Date();

//Testausgabe
alert(startZeit.getTime();
}, false);

  
Wenn ein Wert innerhalb einer Funktion gespeichert wird (var startZeit), ist er verloren beim Beenden der Funktion. Deshalb kannst du beim Schüttelende die "verlorene" Startzeit nicht nutzen.  
  
Defiiniere die Variablen ausserhalb der Funktionen und fülle sie mit Hilfe der Funktionen. Dann kannst du beim Schüttelende prüfen, ob 3 Sekunden vergangen sind. Wenn nicht, setze die Startzeit zurück, wenn ja, mache deine Aktionen.  
  
Gast

[Lila]

Hallo Gast!

Die Startzeit konnte ich noch ermitteln.

window.addEventListener("shakestart", function(){

// Startzeit ermitteln
var startZeit = new Date();

//Testausgabe
alert(startZeit.getTime();
}, false);

>   
> Wenn ein Wert innerhalb einer Funktion gespeichert wird (var startZeit), ist er verloren beim Beenden der Funktion. Deshalb kannst du beim Schüttelende die "verlorene" Startzeit nicht nutzen.  
  
Das war mir bewusst, deswegen habe ich das ja mit der return-Funktion (siehe letzter Absatz) probiert. Dies war aber, wie beschrieben, auch nicht von Erfolg gekrönt.  
  

> Defiiniere die Variablen ausserhalb der Funktionen und fülle sie mit Hilfe der Funktionen. Dann kannst du beim Schüttelende prüfen, ob 3 Sekunden vergangen sind. Wenn nicht, setze die Startzeit zurück, wenn ja, mache deine Aktionen.  
  
Ich glaube jetzt ist der Groschen gefallen ...  
  
1\. Variablen startZeit und Endzeit (global) initialisieren)  
2\. Eventlistener shakestart und shakeend rufen eine (zwei) Funktion(en) ermittle(Start/End)Zeit auf  
3\. ermittleZeit Funktion liefert Returnwert mit Start-/Endzeit und füllt die v.g. globalen Variablen  
  
Mein Konstrukt sah so aus, dass die Eventlistener direkt eine anonyme Funktion mit Returnwert aufrufen und ich so versucht habe den Wert einer Variablen zuzuweisen ...  
  
Oh man, freu mich schon, dass später auszuprobieren.  
  
Vielen Dank schonmal :)

[nemoinho]

Hallo,

dein beschriebenes Problem würde ich mit einer verschachtelten Funktion lösen. Du führst ja aus, dass du das Event erst nach einer gewissen Zeitspanne ausführen willst. Diesen Effekt kann man mit setTimeout hervorragend erzeugen.

Deshalb hier ein kleines Beispiel:

(function(){  
    // timeout in msec  
    var timeout = 3000;  
    // cache für die verzögerte Ausführung  
    var delay = null;  
    // Funktion die ausgeführt werden soll  
    var deferredshakestart = function(e){  
        // do something  
    };  
    // In dieser Funktion wird die Verzögerung initialisiert  
    var shakestart = function(e){  
        e = e || window.event;  
        delay = window.setTimeout(deferredshakestart, timeout);  
    };  
    // Hier wird die Verzögerung gelöscht, falls sie noch nicht ausgeführt  
    // wurde andernfalls wird sie auch gelöscht, aber das ist dann auch egal.  
    var shakeend = function(e){  
        window.clearTimeout(delay);  
        // do something  
    };  
    window.addEventListener("shakestart", shakestart, false);  
    window.addEventListener("shakeend", shakeend, false);  
})();  

Mit freundlichen Grüßen