• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Timer zum Sperren eines Elements

Appler

New member
Hallo an alle,

ich habe eine Tabelle und darunter 1 Eingabefeld erstellt:
HTML:
<table>
<tr>
<td onclick="setTimer(element)">Element 1</td>
<tr>
<tr>
<td  onclick="setTimer(element)">Element 2</td>
<tr>
<tr>
<td  onclick="setTimer(element)">Element 3</td>
<tr>
</table>

<input type="text" value="Element Text" onchange="updateTimer()">

Ich möchte erreichen, dass ein Element bei Klick auf eine Zeile in der Tabelle gesperrt wird. Dafür habe ich die Zeilen mit dem onclick Event versehen, welches dann die Funktion setTimer aufrufen soll. Nun sollte die Zeile für beispielsweise 10 Sekunden gesperrt werden. Beim Ändern des Eingabefeldes soll nun der Timer wieder auf beispielsweise 20 Sekunden erhöht werden.

Leider weiß ich nun nicht so genau wie man dieses Problem am besten umsetzt. Ich habe es mit Interval versucht. Bei meinen Versuchen war es aber leider so, dass die Zeit nicht wieder auf 0 gesetzt wurde sondern von da an weiter läuft wo sie sich gerade befindet.

Das ganze wollte ich für Angularjs umsetzen, da es aber nicht geklappt hat, habe ich versucht das ganze erstmal in einer Test Seite mit JS umzusetzen, damit man den restlichen Daten seine Aufmerksamkeit nicht schenken muss.

Hat in diesem Fall jemand ne einfache Lösung oder ist das nicht so schnell erledigt? Danke vielmals für eure Antworten! :)
 
Zuletzt bearbeitet:
was bedeutet das jetzt genau? Sperren kann man nur etwas, das in irgendeiner Weise aktiv werden kann. Bei HTML-Elementen trifft das aber eigentlich nur auf Formularelemente und Links zu.

Ich habe es schon hinbekommen. Es ging mir erstmal nur um die Zeit, dass die richtig angewendet wird. Das funktioniert nun. Vielleicht hatte ich ein schlechtes Zeitgefühl dabei. In dem AngularJS Projekt gibt es ja dann ein Element welches gesperrt wird.
 
nicht aktualisiert...

- - - Aktualisiert - - -

Zeig' doch deine Lösung, dann habe auch kommende Suchende etwas davon.
 
nicht aktualisiert...

- - - Aktualisiert - - -

Zeig' doch deine Lösung, dann habe auch kommende Suchende etwas davon.

Sorry, hab ich vergessen.

Also meine html sieht nun so aus:

HTML:
<table>
	<tr>
		<td onclick="setTimer()">Element 1</td>
	<tr>
	<tr>
		<td onclick="setTimer()">Element 2</td>
	<tr>
	<tr>
		<td onclick="setTimer()">Element 3</td>
	<tr>
	<tr>
		<td onclick="setTimer()">Element 4</td>
	<tr>
</table>

<input type="text" id="inputField" value="Element Text" onchange="updateTimer()">

Und mein JavaScript so:
Code:
var changed = false;

	function updateTimer() {
		this.changed = true;
	}

	function setTimer() {
		var timer = setInterval(function(){
			if(this.changed) {
				console.log("Input Value hat sich verändert!");
				this.changed = false;
			}
			else
			{
				console.log("Keine Veränderungen");
			}
		}, 5000);
	}

Ich simuliere hier nur die Sperrung eines Elements. Ich habe eine Tabelle die für jedes <td> ein onclick Event bereit hält. Dies simuliert, dass der Benutzer ein Element aus einer Tabelle sperren möchte. Anschließend wird dann die setTimer Funktion ausführt. Diese Funktion prüft im Endeffekt alle 5 Sekunden ob sich das Input Feld vom Wert her geändert hat oder nicht. Dadurch das beim Input Feld ein onchange Event gefeuert wird sobald sich der Wert geändert hat, wird dann die changed Variable auf true gesetzt und nach Ablauf der 5 Sekunden des Intervals wird auf diese Variable geprüft.
 
Danke für's posten. Kleine Bemerkung zum Code: du solltest für sowas auf keinen Fall eine globale Variable verwenden - ganz besonders keine mit einem so generellen Namen.

PS: Ich verstehe immer noch nicht dein Problem - auch nachdem ich deine Lösung gesehen hab'... Warum machst du die Prüfung nicht gleich direkt im onchange?
 
Zurück
Oben