# jquery setInterval



## fredolin (5. November 2013)

Hallo,

ich bastle mal wieder an einer Webseite rum und hab nun ein  kleines Problem.
Ich habe im Kopfbereich Bilder, die über setInterval alle 5sec gewechselt werden sollen

hier mal mein Code, wo sich der Browser (Firefox) aufhängt


```
var numofPicture = 8;

var bildwechsler = function() {    
      for(var i = 0; i<= numofPicture; i++) {         
         $('#header').attr('class', 'headslider'+i);
      }
}

// hier hab ich vorerst die Variante per click in den wrapperbereich
$('#wrapper').click(function(bildwechsler) {
   setInterval(bildwechsler, 5000);
});
```

ich habe zu dem noch bullets, die ich anclicken kann um händisch die bilder zu wechseln.
Nun wäre es toll, hilfe zu bekommen, wo ich beider zusammen legen kann, also das nach 5 sec automatisch da bild wechselt oder wenn man auf eines der bullet klickt.

Hier mein Code für das anklicken der Bullet


```
$('.imageclick').click(function() {
		$('#header').attr('class', 'headslider'+ $(this).attr('id'));
	});
```

Um die großen Bilder an zu zeigen habe ich diese im css in zeinzelne classen als backgroundbilder erstellt und diese lasse ich nun über attribut class somit wechseln. Wenn Ihr da ne besser Idee habt auch da würde ich mich sehr freuen.. aber wichtig ist für mich, das ich was lernen kann, da ich mit jQuery erst begonnen habe.

Gruß
Fredolin


----------



## fredolin (6. November 2013)

Ui.. bis lang konnte mir noch keine einen Ansatz oder Hilfe geben. Ich hoffe doch das mir da eine helfen kann oder nicht?


----------



## tombe (7. November 2013)

So vielleicht:


```
<script type="text/javascript">
// in der Variable aktuell wird der Index des aktuell angezeigten Bildes gespeichert
var aktuell = 0;
// das Array bilder enthält alle Bilder die im Wechsel angezeigt werden sollen
var bilder = Array("1.png", "2.png", "3.png", "4.png", "5.png");
// Bildwechsel alle 2 Sekunden ausführen
var bildwechsel = setInterval("wechsel_automatisch()", 2000);

// beim Anklicken wird das Bild manuell gewechselt
function wechsel_manuell(id) {
	aktuell = id;
	document.getElementById("gross").src = "pic/" + bilder[aktuell];
}
// automatischer Bildwechsel
function wechsel_automatisch () {
	if ((aktuell + 1) < bilder.length) {
		aktuell++;
	} else {
		aktuell = 0;
	}
	document.getElementById("gross").src = "pic/" + bilder[aktuell];
}

</script>
```


```
<div style="padding: 20px; width: 260px; height: 60px; background-color: #808080;">
    <img src="pic/1.png" width="260" height="60" id="gross" />
</div>
<p>---------</p>
<img src="pic/1.png" width="130" height="30" id="0" onclick="wechsel_manuell(0);" />
<img src="pic/2.png" width="130" height="30" id="1" onclick="wechsel_manuell(1);" />
<img src="pic/3.png" width="130" height="30" id="2" onclick="wechsel_manuell(2);" />
<img src="pic/4.png" width="130" height="30" id="3" onclick="wechsel_manuell(3);" />
<img src="pic/5.png" width="130" height="30" id="4" onclick="wechsel_manuell(4);" />
```


----------



## fredolin (7. November 2013)

Hallo tombe,

ich finde deinen Code super, hab aber eine Frage. WIe wird denn der automatische Bilderwechsel angestoßen?
Wenn die Seite geladen ist, startet dieser dann automatisch nach x Zeit?

Gruß fredolin


----------



## tombe (7. November 2013)

Im obigen Code wird in Zeile 7 mit setInterval der automatische Wechsel gestartet, hier ist eine Spanne von 2 Sekunden eingestellt. Der Bildwechsel beginnt, so bald die Seite geladen ist.


----------



## fredolin (7. November 2013)

Hallo Tomb,

erstmal danke für deine Hilfe und auch für deie Erklärung. Ich finde es super das man hier so geholfen wird.

Aber leider bekomme ich immer die Fehlermeldung, das hier in meinem Code "wechsel_automatisch is not defined".

Hier mein Code, denn ich für jQuery angepasst habe.


```
var numofHeader = Array('headslider', 'headslider1', 'headslider2', 'headslider3', 'headslider4', 'headslider5', 'headslider7', 'headslider8');
var aktuell = 0;
var wechsel_automatisch;
setInterval('wechsel_automatisch', 5000);
	
	function wechsel_automatisch() {
		if((aktuell +1) < numofHeader.lenght) {
			alert(aktuell);
			aktuell++;	
		} else {
			aktuell = 0;	
		}
		 $('#header').attr('class', 'headslider'+aktuell);
	};
```

Den Code für das clicken habe ich ja schon. aber hier würde ich sehr gerne hinzu fügen, wenn man geklickt hat, das sich der geklickte Bullet eine andere CSS Eigenschaft annimmt


```
$('.imageclick').click(function() {
		$('#header').attr('class', 'headslider'+ $(this).attr('id'));
	});
```

Da hab ich schon mit attr versucht aber dann passiert nichts.

Gruß Fredolin


----------



## tombe (7. November 2013)

Du hast hier die Klammern vergessen:


```
//so hast du es
setInterval('wechsel_automatisch', 5000);
// und so muss es geschrieben werden
setInterval('wechsel_automatisch()', 5000);
```

Was den Wechsel der Klassen angeht, das kannst du so lösen:


```
function wechsel_manuell(id) {
	aktuell = id;
	document.getElementById("gross").src = "pic/" + bilder[aktuell];
	for (element = 0; element < bilder.length; element++) {
		document.getElementById(element).className = "class1";
	}
	document.getElementById(id).className = "class2";
}
```

Damit dieses Beispiel funktioniert, musst du zuerst zwei Klassen mit der Bezeichnung "class1" und "class2" erstellen und allen Bildern die Klasse "class1" zuweisen. Klickt man ein Bild an, erhält es die Klasse "class2".


----------



## fredolin (7. November 2013)

Hallo tomb,

ich habe es auch mit der geschlossenen Klammer geschrieben. Doch da kommt auch immer die gleiche Fehlermeldung wie schin im Posting davor von  mir beschrieben.

Hier mein aktueller Code


```
var numofHeader = Array('headslider', 'headslider1', 'headslider2', 'headslider3', 'headslider4', 'headslider5', 'headslider7', 'headslider8');
var aktuell = 0;
setInterval('wechsel_automatisch()', 5000);
	
	function wechsel_automatisch() {
		if((aktuell +1) < numofHeader.lenght) {
			alert(aktuell);
			aktuell++;	
		} else {
			aktuell = 0;	
		}
		 $('#header').attr('class', 'headslider'+aktuell);
	};
```

Ich habe auch schon vorher mit "var wechsel_automatisch" versucht, aber gleicher Fehlermeldung. Woran kann es nun noch liegen? Ich bin ratlos.

Gruß Fredolin


----------



## tombe (7. November 2013)

Also ich habe deinen Codeausschnitt mal in mein Beispiel kopiert und damit getestet. Bei mir kommt der Fehler nicht.

Entweder du hast noch mehr Code und der Fehler ist dort versteckt oder du hast es hier richtig eingestellt!?


----------



## fredolin (7. November 2013)

Ich hab nun alles raus genommen aus meine js-datei. aber ich erhalte immer noch die >fehlermeldung?.. woran kann es denn noch liegen.. bin nun echt ratlos..

mmhh grrrr..


----------



## tombe (8. November 2013)

Wenn es irgendwie möglich ist, dann stell hier mal einen Link rein wo man sich alles anschauen kann. Oder aber stell uns die Datei(en) zur Verfügung.

Wie schon geschrieben, mir fehlen sonst die Ideen woran es liegen könnte.


----------



## fredolin (8. November 2013)

Hallo Tomb

ich habe hier mal zwei Dateien hochgeladen. Einmal die Header Datei wo ich alle gesamte JS Scripte include und dann die Script Datei in der ich alle jQuery enthalten sind.

Ich hoffe ich kann dir damit helfen. Zudem findest du auch alles Online unter der URL, damit du dir ein Bild machen kannst.

Wenn Du auf der Webseite bist, es geht um die großen Bilder, die einmal über die Bullet gesteuert werden und nun sollen die auch nach eine bestimmten Zeit automatisch sich wechseln. Das Problem ist, die Bilder liegen in einer CSS Datei, die dann als komplette CSS Datei eingeblendet wird.

Hab da momentan 8 Dateien auf dem Server liegen, aber da es verschiedenen Ebenen sind und der Inhalt der Seite über diese Bilder laufen soll, habe ich erstmal diese Lösung genommen.

Gruß Fredolin


----------



## tombe (8. November 2013)

Es bleibt rätselhaft aber ich habe vermutlich einen Fehler gefunden, der vielleicht etwas damit zu tun haben könnte!?

In deinem Array hat die erste Datei den Namen "headslider", die zweite Datei heißt "headslider1" usw. In der Funktion wird aber IMMER der Wert der Variable aktuell an den Dateinamen angehängt, beim ersten Bild/Arrayeintrag würde das "headslider*0*" ergeben. Diesen Eintrag gibt es aber im Array nicht!

Verschiebe außerdem mal bitte die Zeilen wo die Variablen "aktuell" und "numofHeader" deklariert werden und die Zeile womit setInterval aufgerufen wird aus dem document.ready-Bereich. Setze es einfach davor und teste es dann.


----------



## fredolin (8. November 2013)

Ich habe den Fehler verbessert. Die Zeilen die du da angesprochenhast die habe ich auch ganz nach oben gesetzt vor dem $(document).redy(....) Bereich. Auch hier kommt die gleiche Fehlermeldung. 

Ich arbeitet mit Firefox und habe die Konsole offen. Sehe in der Konsole aber, das immer nach der Zeit die Fehlermeldung erscheint. 

#
#Gruß Fredolin


----------



## abuzze (8. November 2013)

```
numofHeader.lenght
```
da sollte besser

```
numofHeader.length
```
 stehen


----------



## fredolin (9. November 2013)

Hallo abuzze,
Hallo Tomb,

erstmal danke für deine Nachricht. Ja die hat da was bewirkt.

Auch ich habe meine Script etwas umgeschrieben, so wird die Funktion gefunden aber das Background-Image wird nicht geladen.
Das Background-Image binde ich über CSS ein
CSS-Code

```
.headslider0	{
   margin:0;
   padding:0;
   width:100%;
   height:552px;
   background-image:url(../../img/headslider/header_pic_01.jpg);
   background-repeat:no-repeat;
   background-position:center top;
}
```


Hier mein LS-Code

```
setInterval(function() {
		var numofHeader = Array('0', '1', '2', '3', '4', '5', '7', '8');
		var aktuell = 0;
		//alert(aktuell);			 
		if((aktuell +1) < numofHeader.length) {
			aktuell++;
			//alert(aktuell);
		} else {
			aktuell = 0;	
		}
		 $('#header').attr('class', 'headslider'+aktuell);
		 //alert($('#header'));
	}, 8000);
```

Wenn ich abr das Hintergrund über den Klick auf den Bullet verändere, dannwird nach einigen SEC. das Hintergrundbild geladen was man zum Anfang gesehen hat.

Nun weiß ich nicht mehr weiter.. bin echt ratlos..

Was mache ich verkehrt oder wo liegt nun der Fehler..

Gruß Fredolin


----------



## fredolin (9. November 2013)

Hoffe das ich noch mit Eurer Hilfe da eine Lösung finden kann.


----------



## rd4eva (9. November 2013)

```
$(document).ready(function() {

		
	var numofHeader = Array('headslider', 'headslider1', 'headslider2', 'headslider3', 'headslider4', 'headslider5', 'headslider7', 'headslider8');
	var aktuell = 0;
	
	window.setInterval('wechsel_automatisch()', 12000);
		
	function wechsel_automatisch() {
		if((aktuell +1) < numofHeader.lenght) {
			alert(aktuell);
			aktuell++;	
		} else {
			aktuell = 0;	
		}
		 $('#header').attr('class', 'headslider'+aktuell);
	};


});
```

So siehts momentan bei dir aus. (Unnötiges Zeug hab ich entfernt).
Das du da die Fehlermeldung bekommst das wechsel_automatisch nicht definiert ist ist völlig logisch.
Das Stichwort lautet "Scopes".

An einem einfacheren Beispiel siehst du deinen Fehler vielleicht selbst:

```
var doSth = function(){
    console.log('foo');
    
    window.setInterval('doSthElse', 1000);
    
    function doSthElse(){
        console.log('bar');
    }
};

doSth();
```

Das wird dir genau den gleichen Error ausspucken. Nämlich das doSthElse nicht definiert ist.
Und Warum? Weil doSthElse im function Scope von doSth definiert wurde. Niemand kennt die Funktion außer doSth.

Noch einfacheres Beispiel?
Du versuchst gerade folgendes:

```
function foo(){
    var a = 0;
}
console.log(a);
```

//E

Hab nicht gesehen das es eine zweite Seite gibt.
Der Post passt trotzdem denn was du jetzt gemacht hast ist mindestens genauso großer Unsinn


```
setInterval(function() {
        var numofHeader = Array('0', '1', '2', '3', '4', '5', '7', '8');
        var aktuell = 0;
        if((aktuell +1) < numofHeader.length) {
            aktuell++;
        } else {
            aktuell = 0;    
        }
         $('#header').attr('class', 'headslider'+aktuell);
    }, 8000);
```

Wie soll das denn bitte funktionieren?
aktuell wird immer 0 bleiben.

Das ist das gleiche wie folgendes

```
while(true){
    var i = 0;
    if(i == 1){ console.log('Ein Wunder'); }
}
```


----------



## fredolin (9. November 2013)

Hwy rd4eva,

das ist schön das du mein code schlecht machst. wenn du das schon so schlau her tipperst, dann könntest du doch vielleicht mir eine hilfe geben. 

gruß fredolin


----------



## rd4eva (9. November 2013)

Das habe ich bereits getan und wenn du das noch nicht gemerkt hast bzw. dir bei den simplen Beispielen nichts auffällt dann heißt es für dich Back to basics.
Hier bitte:
http://de.selfhtml.org/javascript/sprache/variablen.htm#definieren



> [...]Es gibt globale Variablen und lokale Variablen. Eine lokale Variable erhalten Sie durch die Deklaration der Variablen mit var innerhalb einer Seite Funktion. Im obigen Beispiel sind die Variablen [...] innerhalb der Funktion SchreibeQuadrate() als lokale Variablen notiert. Diese Variablen sind deshalb nur innerhalb dieser Funktion gültig. Man spricht in diesem Zusammenhang auch von der "Lebensdauer" von Variablen. Parameter, die einer Funktion übergeben werden, werden ebenfalls als lokale Variablen behandelt.[...]


----------



## abuzze (10. November 2013)

Ich weiss jetzt nicht wo aktuell der Schuh drückt, sollte es immer noch der Intervall sein, hier mal was zum anfangen:


```
(function(interval, arr, prefix){
  return (setInterval(function() {
          arr.push(arr.shift());
          $('#header').prop('className', prefix+arr[0]);
    },interval));
})(8000, ['',1,2,3,4,5,6,7,8], 'headslider');
```

Ist eigentlich kein Anfang, ist schon alles was es braucht.

Was geht dort vor sich?

Es wird eine sogenannte anonyme funktion aufgerufen(eine ohne Namen).

Der Funktion werden die nötigen Argumente übergeben(bspw. intervall und  Array).

Die Argumente sind überall im Geltungsbereich dieser Funktion sichtbar, so auch im callback des Intervalls den diese Funktion erzeugt(der von rd4eva erwähnte function-scope)

Innerhalb des Intervall-callbacks wird jetzt einfach immer das erste Array-Element entfernt und am Ende des Arrays angehangen.
Man braucht jetzt nur noch das erste Element abzufragen, das wars.

Im Prinzip ginge es noch einfacher:

```
setInterval(function(arr,prefix) {
        arr.push(arr.shift());
        $('#header').prop('className', prefix+arr[0]);
    }, 2000,['',1,2,3,4,5,6,7,8],'headslider');
```

Hier werden die Argumente dem Interval-callback direkt übergeben. Knackpunkt: IE macht das erst ab v10 mit


----------



## fredolin (10. November 2013)

Hallo,
und vorab einen riesigen DankeschönStrauß an alle die hier geholfen haben. Ja es haut wunder bar hin.

Nun hab ich nur noch ein kleinen Wunsch, das ich noch mit fadeIn und FadeOut erweitern könnte.

Hier mein Code
1.) per Click

```
$('.imageclick').click(function() {	
		clickbutton($(this).attr('id'));							
	});
	
	
	function clickbutton(id) {
		$('#header').attr('class', 'headslider'+ id);
	}
```

2.) automatisch

```
setInterval(function(arr,prefix) {
		arr.push(arr.shift());
		$('#header').prop('className', prefix+arr[0]);
	}, animationtime, ['',0,1,2,3,4,5,6,7,8], 'headslider');
```

und wenn ich die zweite Funktion, die ich von abuzze übernommen habe irgendwie so abänder könnte das ich  die function clickbutton aufrufen könnte das wäre super. Ich habe da schon einiges dran rum probiert aber immer klappte es nicht.

gruß fredolin


----------



## rd4eva (10. November 2013)

Siehst du abuzze deswegen ist vorkauen sch....
Er hat nämlich nichts gelernt sondern einfach copy&paste deine Lösung übernommen.

@fredolin
Wenn du es verstanden hättest dann hättest du gemerkt das
$('#header').attr('class', 'headslider'+ id); genau das gleiche ist wie $('#header').prop('className', prefix+arr[0]);.


----------



## fredolin (10. November 2013)

rd4eva du das habe ich verstanden aber da ich bei der click-variante die id bekomme, brauche ich den klassen namen nicht unbeding mit zu schleifen und kann das dann gleich festschreiben.

und dein vorwurf, das ich nichts lerne sondern nur copy&paste mache stimmt nur bedingt. ich orientiere mich an dem was ich bekomme aber ich baue dann doch alles so um wie ich es dann auch verstehe. aber es gibt sachen, wo ich nochnicht alles verstehe und dann benutze ich es vorerst einmal. aber ich versuche dann es um zuschreiben in einen code den ich besser lesen und verstehen kann.

auch wenn ich manchmal dann in meinen posting auch wünsche für scripte nachfrage, dient es für mich als lernmittel. ich versuche dannauch die scripte so zu erweitern und bemühe mich vorab erstmal selber für eine lösung zu finden.

ich will mich hier nicht erklären, aber ich bedanke mich immer bei allen die mir helfen sei es komplette lösungen oder nur denkanstößen hier schreiben.

danke und noch mal danke..

gruß fredolin


----------



## rd4eva (10. November 2013)

> rd4eva du das habe ich verstanden aber da ich bei der click-variante die id bekomme, brauche ich den klassen namen nicht unbeding mit zu schleifen und kann das dann gleich festschreiben.


Nein du hast es eben nicht verstanden. Auch jetzt noch nicht.
Denn hättest du es verstanen wüsstest du 

```
$('#header').prop('className', prefix+arr[0]); 
// ist das gleiche wie
 $('#header').attr('class', 'headslider'+ id);
// Folglich ist
$('#header').prop('className', prefix+arr[0]);
// auch das gleiche wie
clickbutton(arr[0])
```
Und schon hättest du dein zweites Problem gelöst.


----------



## fredolin (11. November 2013)

Ich möchte mich bei allen die hier mir geholfen haben rechtherzlich bedanken.
Denke das ich die anderen Sachen irgendwie anders hinbekomme in dem ich weiter lernen muss. Aber es freut mich immer wieder, hier helfende Hände zu finden. Danke und noch mals Danke..

Danke rd4eve
Danke abuzze
Danke Tomb

Gruß Fredolin


----------



## fredolin (15. November 2013)

Hallo,

so ich habe wohlwohlend mir die WOrt von rd4eve zu gemüte genommen und habe mein problem selber noch mal überarbeitet.
ich habe anfangs mir den code von abuzze ausgeliehen.


abuzze hat gesagt.:


> Ich weiss jetzt nicht wo aktuell der Schuh drückt, sollte es immer noch der Intervall sein, hier mal was zum anfangen:
> 
> 
> ```
> ...



doch es scheint dann immer wieder hier leute zu geben, die das ausliehen von codes nicht gut finden (ich unterstütze diese haltung) und geben dies dann auch in den betreffenen theards schriftlich wieder. natürlich hat dies mich angespornt, mein eigenen code doch zu schreiben. 



rd4eve hat gesagt.:


> Siehst du abuzze deswegen ist vorkauen sch....
> Er hat nämlich nichts gelernt sondern einfach copy&paste deine Lösung übernommen.
> 
> @fredolin
> ...



ja was soll ich sagen. ich habe es selber geschaft, mir per jquery den Headwechsel so zu schreiben, so das er das tut was und wie ich es möchte.
denke das da einige eventuell auf ein plugIn oder Slider zurück gegriffen hätten, doch ich wollte es selber so schreiben, damit ich es auch verstehe.

es hat etwas gedauert, aber nunhabe ich es geschafft und zeige hier euch meinen code:


```
var counter = 0;
var timeout = 12;
var animationtime = timeout * 1000;
var fadeOutTime = 5000;
var fadeInTime = 5000;
	
	setInterval(function() {
		showHeader();				  
	}, animationtime);
	
	function showHeader() {
		if(counter == 0) {counter++; return }
		$('#header').fadeOut(fadeOutTime, function() {
			$('#header').attr('class', 'headslider'+ counter).fadeIn(fadeInTime);
		 });
		counter == 8 ? counter = 0 : counter++;   
	}
	
	$('.imageclick').click(function() {	
		wechselHeader($(this).attr('id'));
		if($('imageclick').click){
			clearInterval;	
		}
	});
	
	
	function wechselHeader(id) {
		$('#header').fadeOut(fadeOutTime, function() {
			$('#header').attr('class', 'headslider'+ id).fadeIn(fadeInTime);
		 });
	}
```

ihr könnt euch das ergebnis auf meine webseite anschauen. http://www.webslay.de

sicherlich gibt es da stellen, wo man den code verbessern kann oder so optimieren kann das es vielleicht leistungsfähiger ist.
wenn ihr gern mir solche optimierungsvorschläge geben wollt, damit ich diese hier posten kann, dann sendet diese über mein kontaktformular auf meiner webseite
http://www.webslay.de zu. ich freue mich wenn ich dann hier eure vorschläge posten darf.

dennoch bedanke ich mich an alle mitposter hier bei meinen problem. danke und so bringt es spass.

lg fredolin


----------

