Button mit Intervall

[Antons]

Hallo,

ich habe in meinem Script 2 Buttons.

<button type="button" id="inc" onclick="inc('test');">+</button>
<input type="button" id="start" value="start"/>

Ich würde gerne mit einen klick auf start, alle 3 Sekunden den Button inc auslösen.
Bekomme es leider nicht hin.

MfG

 

[kkapsner]

Registriere auf "start" doch auch einen onclick, der mit window.setInterval() die Funktion inc alle 3 Sekunden aufruft...

<input type="button" id="start" value="start" onclick="window.setInterval(function(){inc('test')}, 3000);">

(schöner ist es natürlich, wenn du das Ganze in eine Funktion packst.)

Wenn du das auch noch irgendwie stoppen willst, musst du das etwas aufbohren.

 

[Antons]

Stimmt an das habe ich noch gar nicht gedacht.
Dann muss noch ein zweiter Stopp Button her. Wie sieht denn der Befehl fürs Stoppen aus ?

MfG

 

[kkapsner]

Du muss dir den Rückgabewert von window.setInterval() speichern (am Besten nicht als globale Variable, sondern in einem gemeinsamen Scope der start() und stop() Funktion) und dann an window.clearInterval() verfüttern.

 

[Antons]

Danke kkapsner für die schnelle Antwort, aber leider sind mir das zu viele Informationen auf einmal.
Hättest du vielleicht ein kleines Beispielscript ?

MfG

 

[kkapsner]

Klar:

var timer = (function(){
	var interval = false;
	return {
		start: function(){
			if (!interval){
				interval = window.setInterval(
					function(){
						inc("test");
					},
					3000
				);
			}
		},
		stop: function(){
			if (interval){
				window.clearInterval(interval);
				interval = false;
			}
		}
	};
}());

<input type="button" id="start" value="start" onclick="timer.start()">
<input type="button" id="stop" value="stop" onclick="timer.stop()">

ungetestet.

 

[Antons]

Alles bestens, funktioniert super.

MfG

 

[Antons]

Jetzt hätte ich noch meine funktion eingebaut:

Hier die funktion:

(function($){ $(document).ready(function(){ $('#Plus').click(function(){var user_id=$('#Nummer').val();
$('#user_fb_image').attr('src','http://graph.facebook.com/'+user_id+'/picture?type=large');})})})(jQuery)

Das ganze sieht dann so aus:

var timer = (function(){
	var interval = false;
	return {
		start: function(){
			if (!interval){
				interval = window.setInterval(
					(function($){ $(document).ready(function(){ $('#Plus').click(function(){var user_id=$('#Nummer').val();
$('#user_fb_image').attr('src','http://graph.facebook.com/'+user_id+'/picture?type=large');})})})(jQuery)
					},
					3000
				);
			}
		},
		stop: function(){
			if (interval){
				window.clearInterval(interval);
				interval = false;
			}
		}
	};
}());

Leider funktioniert es so nicht.
Sieht jemand einen Fehler ?

MfG

 

[kkapsner]

Du musst dem window.setInterval() eine Funktionsreferenz und nicht den Rückgabewert einer Funktion übergeben:

var timer = (function(){
	var interval = false;
	return {
		start: function(){
			if (!interval){
				interval = window.setInterval(
					function(){
						(function($){
							var user_id=$('#Nummer').val();
							$('#user_fb_image').attr('src','http://graph.facebook.com/'+user_id+'/picture?type=large');
						})(jQuery);
					},
					3000
				);
			}
		},
		stop: function(){
			if (interval){
				window.clearInterval(interval);
				interval = false;
			}
		}
	};
}());

- ich hab' mir mal erlaubt, den inneren Code des click-Handlers zu verwenden. Ich denke nicht, dass du den click-Handler periodisch zuweisen willst.

PS: in der PN war im Code ein Fehler.

 

[Antons]

Der Kopf raucht zwar stark, aber leider läuft es nicht

 

[mikdoe]

Ich glaube, Korbinian würde jetzt fragen, was da nicht läuft.

 

[Antons]

Hi, entschuldigt schon mal meine Ausdrucksweise. Aber nach einer Woche Javascript, weis ich die ganzen Fachausdrücke einfach noch nicht.

Das Script soll die Nummer alle x Sekunden hochzählen, und das Bild laden.
Nummer zählt nicht hoch, und es wird auch nichts geladen.

MfG

 

[mikdoe]

Ist die Fehlerkonsole des Browsers leer? Hast du Debug Ausgaben (z.B. mit console.log() oder alert()) eingebaut und Zwischenschritte kontrolliert?

 

[Antons]

Hi, entschuldigt schon mal meine Ausdrucksweise. Aber nach einer Woche Javascript, weis ich die ganzen Fachausdrücke einfach noch nicht.

Das Script soll die Nummer alle x Sekunden hochzählen, und das Bild laden.
Nummer zählt nicht hoch, und es wird auch nichts geladen.

MfG

 

[mikdoe]

Den Text aus dem Beitrag vor meinen Fragen zu kopieren beantwortet diese nicht. Wenn du etwas nicht verstehst, frag bitte nach aber ignoriere die Fragen nicht einfach!

 

[kkapsner]

In dem Code ist auch nichts drin, dass die Zahl erhöht...

Du musst also den Wert, den du aus dem <input> bekommst, per parseInt() als Nummer interpretieren, inkeremntieren und dann wieder zurückschreiben:

var numInput = document.getElementById("Nummer");
var userId = parseInt(numInput.value, 10);
userId += 1;
numInput.value = userId;
document.getElementById("user_fb_image").src = "http://graph.facebook.com/" + userId + "/picture?type=large";