setInterval schleife unterbinden

[xJonx]

Moin liebe Gemeinde,

ich bastel derzeit nen bissle mit Javascript rum und habe mir ein kleines Script gebastelt, mit der ich eine kleine Gallery steuern kann.

Dieses Script ist natürlich noch nicht optimiert, weil ich halt an einer Stelle gerade noch feststecke: Wenn ich zB. einfach mal 4, 5mal Klicke oder zb. 'nen MouseWheel Controller mit einbinde, kommt es zu dem Problem das das Script in der Funktion fading() hängen bleibt. Sprich: Das Bild wird zwar gewechselt, aber er schleift durchgehend das Faden an sich durch.

Nun die Frage: Wie kann ich das Unterbinden? So das quasi nur 1 Event zugelassen wird, und alles andere Ignoriert wird, bis man das Event beendet ist. Oder aber: wie man die Schleife zum Faden, sicher nach beenden stopen kann.

Hier einmal das Script (leicht umgebrochen, damit es die Seite nicht sprengt!):

// Vordefinierte Vars
var img = new Array,
	project = new Array,
	page = new Array,
	currentImage = 0,
	i = 1, 
	j = 0, 
	k = 100, 
	active ;

// Datensaetze
img[0] = './images/projekt/01/1.jpg' ;
img[1] = './images/projekt/02/1.jpg' ;
img[2] = './images/projekt/03/1.jpg' ;

project[0] = 'Projekt 1' ;
project[1] = 'Projekt 2' ;
project[2] = 'Projekt 3' ;

page[0] = 'projekt_1.html' ;
page[1] = 'projekt_2.html' ;
page[2] = 'projekt_3.html' ;

// Fading
function fading() {
	if (j == 0) { i = i-0.1; k = k-10 ; if (i <= 0.1) { 
		j = 1 ; document.getElementById('galleryimage1').src = img[currentImage] ; 
	} } else { 
		i = i+0.1 ; k = k+10 ; if (i >= 0.9) { window.clearInterval(aktiv); i= 1 ; k= 100 ; j = 0 ; } }
	document.getElementById('image').style.opacity = i ;
	document.getElementById('image').style.filter = 'alpha(opacity=' + k + ')' ;
}

// Ansteuerung
function gallery(param) {
	if (param == 'next') {
		if (currentImage == (img.length-1)) { currentImage = 0 ; } 
		else { currentImage++ ; }
	}
	if (param == 'prev') {
		if (currentImage == 0) { currentImage = (img.length-1) ; } 
		else { currentImage-- ; }
	}
	document.getElementById('headline').innerHTML = project[currentImage] ; 
	document.getElementById('goto').href = page[currentImage] ;
	aktiv = window.setInterval('fading()', 1);
}

Beste Grüße,
Jon

[Kropff]

Ich denke, dass du ggf. mit Event-Listenern arbeiten könntest.

Peter

[xJonx]

Ich denke, dass du ggf. mit Event-Listenern arbeiten könntest.

Peter

Hey,

jau super. Im JS Bereich bin noch alles andere als Fit unterwegs.
Man fummelt sich halt nen bissle was zusammen und es klappt,
aber viele Dinge, naja, muss man erst noch rausfinden.

Das mit den Anonymen Funktionen ist super!
Dickes Lob an dich. Ich mag diese Art zu schreiben ...

Zu dem Thema: Meinste ich soll den Event onload einfügen,
nach dem Click entfernen und nach dem Ausführen wieder
hinzufügen?

[Kropff]

Zu dem Thema: Meinste ich soll den Event onload einfügen, nach dem Click entfernen und nach dem Ausführen wieder
hinzufügen?

Probier es aus.

Peter

[xJonx]

Probier es aus.

Peter

window.onload = function() {
	var btnPrev = document.getElementById('btnPrev');
	var btnNext = document.getElementById('btnNext');
	if (navigator.userAgent.match(/MSIE/)) {
		btnPrev.attachEvent('onclick', function() { gallery('prev') ; });
		btnNext.attachEvent('onclick', function() { gallery('next') ; });
	} else {
		btnPrev.addEventListener('click', function() { gallery('prev') ; }, false);
		btnNext.addEventListener('click', function() { gallery('next') ; }, false);
	}
}

also damit komm ich weiter ... nur leider hilft das nicht bei dem bug.
ich hab jetzt zusätzlich noch mal versucht, diesen event zu entfernen
wenn man geklickt hat und erst wenn man beim clearInterval ankommt, wieder eingefügt.
Leider war das Ergebnis das selbe wie vorher: nur das ich nur noch einmal klicken musst ^^

Grüße,
Jon

[Kropff]

Ich zitier mich mal selber:

Leider gilt dieses Prinzip nicht für das Entfernen eines Event-Handlers. Denn sobald man einen Event-Listener mit einer anonymen Funktion erstellt, ist erst mal hängen im Schacht.

Schau dir dazu mal dieses Tutorial an. Vielleicht solltest du erst mal ohne Fade-Effekt und setInterval arbeiten. Wenn das läuft, setzt du dich an den Effekt.

Peter

[xJonx]

Also, ich hab beim rumbasteln jetzt erstmal diesen Weg hier gefunden:

function fading() {
	if (j == 0) { 
		i = i-0.1; 
		k = k-10 ; 
		if (i <= 0.1) { 
			j = 1 ; document.getElementById('galleryimage1').src = img[currentImage] ; 
		} 
	} else { 
		i = i+0.1 ; 
		k = k+10 ; 
		if (i >= 0.9) { 
			window.clearInterval(aktiv); i= 1 ; 
			k = 100 ; 
			j = 0 ;
			document.getElementById('btnPrev').onclick = function() { gallery('prev') ; }
			document.getElementById('btnNext').onclick = function() { gallery('next') ; }
		} 
	}
	document.getElementById('image').style.opacity = i ;
	document.getElementById('image').style.filter = 'alpha(opacity=' + k + ')' ;
}

// Ansteuerung
function gallery(param) {
	
	document.getElementById('btnPrev').onclick = '' ;
	document.getElementById('btnNext').onclick = '' ;
	
	if (param == 'next') {
		if (currentImage == (img.length-1)) { currentImage = 0 ; } 
		else { currentImage++ ; }
	}
	if (param == 'prev') {
		if (currentImage == 0) { currentImage = (img.length-1) ; } 
		else { currentImage-- ; }
	}
	document.getElementById('headline').innerHTML = project[currentImage] ; 
	document.getElementById('goto').href = page[currentImage] ;
	aktiv = window.setInterval('fading()', 1);
	Cufon.replace('H1');
}
window.onload = function() {
	document.getElementById('btnPrev').onclick = function() { gallery('prev') ; }
	document.getElementById('btnNext').onclick = function() { gallery('next') ; }
}