Animacja JQuery (pętla) - problem przy refraktoryzacji

Question

Witam.

Napisałem działający kod który uzupełnia progressbary po przejechaniu scrollem, jednak nie jest on zbyt optymalny i chcę go zrefraktoryzować, ale nie potrafię sobie z tym poradzić.

Działający kod:

 $(document).ready(function(){
 	var newprogress = new Array(14);
 	 newprogress[0] = $('#c').attr('aria-valuenow');
 	 newprogress[1] = $('#net').attr('aria-valuenow');
 	 newprogress[2] = $('#java').attr('aria-valuenow');
 	 newprogress[3] = $('#sql').attr('aria-valuenow');
 	 newprogress[4] = $('#js').attr('aria-valuenow');
 	 newprogress[5] = $('#php').attr('aria-valuenow');
 	 newprogress[6] = $('#bs').attr('aria-valuenow');
 	 newprogress[7] = $('#android').attr('aria-valuenow');
 	 newprogress[8] = $('#win').attr('aria-valuenow');
 	 newprogress[9] = $('#linux').attr('aria-valuenow');
 	 newprogress[10] = $('#uml').attr('aria-valuenow');
 	 newprogress[11] = $('#git').attr('aria-valuenow');
 	 newprogress[12] = $('#wzorce').attr('aria-valuenow');
 	 newprogress[13] = $('#entity').attr('aria-valuenow');
 	//console.log(newprogress);
 $(window).scroll(function anim(){
 	if ($(this).scrollTop() > 100){
 			
 	$('#c').animate({
 		width: parseInt(newprogress[0]) + '%'
 	},1000).clearQueue(anim);
 	$('#net').animate({
 		width: parseInt(newprogress[1]) + '%'
 	},1200).clearQueue(anim);
 	$('#java').animate({
 		width: parseInt(newprogress[2]) + '%'
 	},1400).clearQueue(anim);
 	$('#sql').animate({
 		width: parseInt(newprogress[3]) + '%'
 	},1600).clearQueue(anim);
 	$('#js').animate({
 		width: parseInt(newprogress[4]) + '%'
 	},1800).clearQueue(anim);
 	$('#php').animate({
 		width: parseInt(newprogress[5]) + '%'
 	},2000).clearQueue(anim);
 	$('#bs').animate({
 		width: parseInt(newprogress[6]) + '%'
 	},2200).clearQueue(anim);
 	$('#android').animate({
 		width: parseInt(newprogress[7]) + '%'
 	},2400).clearQueue(anim);
 	$('#win').animate({
 		width: parseInt(newprogress[8]) + '%'
 	},2600).clearQueue(anim);
 	$('#linux').animate({
 		width: parseInt(newprogress[9]) + '%'
 	},2800).clearQueue(anim);
 	$('#uml').animate({
 		width: parseInt(newprogress[10]) + '%'
 	},3000).clearQueue(anim);
 	$('#git').animate({
 		width: parseInt(newprogress[11]) + '%'
 	},3200).clearQueue(anim);
 	$('#wzorce').animate({
 		width: parseInt(newprogress[12]) + '%'
 	},3400).clearQueue(anim);
 	$('#entity').animate({
 		width: parseInt(newprogress[13]) + '%'
 	},3600).clearQueue(anim);
 	}

	});
 });

Kod po refraktoryzacji:

var newprogress = new Array('#c', '#net', '#java', '#sql', '#js', '#php', '#bs', '#android', '#win', '#linux', '#uml', '#git', '#wzorce', '#entity')
var progress= [14];

 $(document).ready(function(){
 	 	
 	 for(i=0; i < 14; i++){
 	 	
 	 progress[i] = $(newprogress[i]).attr('aria-valuenow'); 
 	
 	 }

 $(window).scroll(function anim(){
 	  	var x = 1000;
 		if ($(this).scrollTop() > 100 ){
 			for(j=0; j < 14; j++ ){
 				$(newprogress[i]).animate({
 					width: parseInt(progress[i]) + '%'	
 				},x+200).clearQueue(anim);
 			}
		}
 });

 	
 });

Pierwsza część kodu działa, bo poprawnie przypisuje do tablicy wartości atrybutów 'aria-valuenow', ale animacja nie chce się wykonać. Gdzie popełniam błąd? W konsoli brak błędów. Nie chcę gotowego kodu, proszę mnie naprowadzić na rozwiązanie.

Answer 1

A czemu nie dodasz tym progressbarom klasy i nie odwołasz się do niej?

Comments

Klasę dodaną mam, jeśli Cię dobrze rozumiem to w kodzie funkcji anim() zamieniam $(newprogress[i]) na $('.klasa') tylko to za dużo nie zmienia, animacja dalej się nie wykonuje.

---

Hmm… A po co Ci tam to clearQueue? Nie powinieneś tego aby wywołać przed wywołaniem animate?

---

clearQueue zapobiega ponownemu wywołaniu funkcji anim(), bez tego po ponownym scrollu animacja znowu się "rusza".

Answer 2

Witam, Masz błąd składni podczas inicjalizacji tablicy newprogress. Zakładam, że chodziło Ci ze zmienną x o zwiększanie jej wartości o 200, co każdą iterację pętli, jeśli tak to wtedy musi być x += 200. 

Lepszym rozwiązaniem w pętli for jest wskazanie wielkości tablicy, jako ilość iteracji do wykonania. Jeśli potrzebujesz przejść po całej kolekcji to warto użyć pętli for / in, która przechodzi po wszystkich elementach. Krótszy zapis, a co za tym idzie czytelniejszy kod.

Poniżej poprawiony kod:

 $(document).ready(function(){
 
 	var newprogress = new Array("#c", "#net", "#java", "#sql", "#js", "#php", "#bs", "#android", "#win", "#linux", "#uml", "#git", "#wzorce", "#entity");
	var progress = [];
	
	 for(i in newprogress)
			progress[i] = $(newprogress[i]).attr('aria-valuenow');
	
 	$(window).scroll(function anim(){
 		if ($(this).scrollTop() > 100){
	
	var x = 1000;
	
	//for(i = 0;  i< newprogress.length; ++i)
	for(i in newprogress)
		  	$(newprogress[i]).animate({
 		width: parseInt(progress[i]) + '%'
 	},x+=200).clearQueue(anim);
}

});
 });

 

Comments

Jeśli potrzebujesz przejść po całej kolekcji to warto użyć pętli for / in, która przechodzi po wszystkich elementach. Krótszy zapis, a co za tym idzie czytelniejszy kod.

Nie używa się for...in do tablic! http://tutorials.comandeer.pl/js-beauty.html#petle → to leci po wszystkich elementach tablicy, a nie tylko jej indeksach numerycznych. Jeśli możemy użyć ES5, to wówczas najlepiej użyć Array.prototype.forEach. Jeśli możemy użyć ES6, to wówczas możemy jeszcze wykorzystać for...of. W innym wypadkach należy użyć zwykłego for!

---

Twoje rozwiązanie działa. Dzięki!