Operazioni consegutive e non contemporanee con jQuery

**Madsex** · 28-05-2013, 16:18

Ciao raga, ecco il mio problema:

dal mio server mostro una lunghissima lista di giocatori. Ecco il codice di uno solo per farvi

codice:

<div class="players-container" title="ROLO GIOCATORE" >
    
NOME GIOCATORE

</div>

Poi ho creato un filtro in testa alla lista per nascondere i giocatori che non hanno il ruolo desiderato:

codice:

<div class="filter-players-little filter-players-little_clicked" title="Portiere"><span class="text-filter">Port...</span><div class="loading-filter"></div></div>
                                 <div class="filter-players-little" title="Difensore"><span class="text-filter">Dif...</span><div class="loading-filter"></div></div>
                                 <div class="filter-players-little" title="Centrocampista"><span class="text-filter">Centr...</span><div class="loading-filter"></div></div>
                                 <div class="filter-players-little" title="Attaccante"><span class="text-filter">Attac...</span><div class="loading-filter"></div></div>

Nel mio file .js ho creato lo script che filtra i giocatori in base al ruolo:

codice:

 $('.filter-players-little').on("click",function(){
			 
			      var filtro = $(this).attr("title");
				  
				  $(this).children(".text-filter").hide();
				  $(this).children(".loading-filter").css("display","inline-block");
				  
			    $(".filter-players-little_clicked").removeClass('filter-players-little_clicked'),
				  
				  $(this).addClass('filter-players-little_clicked'),
				  
				  $('.players-list-little .players-container').hide(),
				  
				  $('.players-container').each(function(){
					  
					       var attributo_ruolo = $(this).attr('title');
						   
						   if( attributo_ruolo == filtro ){ $(this).show() }						   
					  
					  }),
					  
				$(this).children(".text-filter").show(),
				$(this).children(".loading-filter").hide(),	 
			 
			 })

In pratica non fa altro che mostrare il div ".loading-filter" quando clicchiamo su un filtro, nascondere tutti i giocatori che hanno un ruolo diverso da quello richiesto e mostrare quelli con il ruolo richiesto. Per non continuare oltremodo..... lo script funziona bene, ma ho notato che sui dispositivi mobile è verametne molto lento. A questo punto avevo pensato di aggiungere quel ".loading-filter" ma ho scoperto che comunque non me lo fa vedere finchè non ha completato il filtro sulla lista. Insomma come posso mostrare prima il ".loading-filter" e poi cominciare il filtro sulla lista ? Attualmente credo faccia tutto contemporaneamente non mostrando quindi la prima parte dello script che è puramente grafica.

Spero di essere stato chiaro, non sono bravo a spiegare.

Grazie in anticipo !

**Nobody33** · 28-05-2013, 19:03

Dov'è messo lo script nella pagina?

**Madsex** · 28-05-2013, 19:08

No, in un file estermo richiamato nell' head, cosa cambia ?

Grazie

**Nobody33** · 28-05-2013, 20:30

No, in un file estermo richiamato nell' head, cosa cambia ?

Cambia la velocità di caricamento se modifichi un po le cose:

Se lo script è tutto qui, prova a metterlo subito dopo il tag <body>, cosi dovrebbe migliorare un po.
se lo usi solo per una pagina, mettilo direttamente nel body piùttosto di farlo caricare dall'esterno.
Inoltre comprimi TUTTI i file .js.

Puoi testare anche la velocità di caricamento.

Inoltre, puoi postare un link alla pagina per capire un po l'ordinamento dei file js e css ?

Non credo che il problema del caricamento sia solo il tuo script postato di 20 righe.

Tutto ciò ovviamente vale solo se ho capito bene il tuo problema.

**Madsex** · 29-05-2013, 04:07

Sfortunatamente non posso testare lo script cn il tool che mi hai consigliato perchè non è online.

Cmq tieni presente che tutti i js sono compressi, trattandosi di una app per ios era doveroso farlo, mi concentravo su quello script perchè in effetti si tratta di un "click" quindi altro codice non viene richiamato, quello che mi semra strano è che la prima parte dello script che ho postato (cioè nascondere text-filter e mostrare loading-filter) non viene proprio visualizzata, in pratica è come se non ci fosse, dal click al compimento del filtro passano 1/2 secondi nei quali dovrei veder apparire loading-filter che però non appare.

Francamente non so come farti capire, non potendo fartelo vedere materialmente, tra l'altro se lo vedi con un normale browser funziona tutto molto veloce è sul cellulare che va lento.

Suggerimenti spannometrici ?

Grazie

**fcaldera** · 29-05-2013, 09:35

non mi stupisce che su mobile il funzionamento del tuo script sia tutto molto più lento: a occhio ti direi

1) Metti in una variabile-cache $(this) visto che lo usi diverse volte, il che significa che richiami continuamente (e inutilmente) la funzione jQuery quando non ce ne sarebbe bisogno

definisci a monte $this = $(this) e usa $this come riferimento in tutte le occorrenze successive.

2) Evita tutti quei reflow che stai provocando, cambiando di continuo la geometria della pagina (nascondi e mostri blocchi, cambi la proprietà display)

La soluzione ottimale è cambiare o aggiungere solo una classe sull'elemento parent e di codificare le impostazioni di stile via css in modo tale che con la classe aggiunta gli elementi annidati si comportino di conseguenza (mostrandosi o nascondendosi)

3) Hai usato la virgola come terminazione della riga. Usa il punto e virgola

4) Non è necessario usare sempre jQuery quando ci sono delle alternative altrettanto semplici : ad esempio $(this).attr('title'); richiama la funzione jQuery e poi chiama anche il metodo attr(). Potresti scrivere direttamente this.title

**Madsex** · 30-05-2013, 00:58

Grazie infinite, seguendo i tuoi piccoli ma fondamentali consigli adesso il filtro funziona alla perfezione e posso pure permettermi il lusso di togliere il loading di attesa.

Grazie

Discussione: Operazioni consegutive e non contemporanee con jQuery

Strumenti discussione

Ricerca discussione

Visualizza

Operazioni consegutive e non contemporanee con jQuery

Permessi di invio