temporizzare un ciclo for Javascript

Discussioni e problematiche su linguaggio Javascript e framework come jQuery e simili.

Moderatori: maurizio, markdesign

Regole del forum
Per scrivere del codice all'interno di ogni post, utilizzare il tag: [syntax=il_linguaggio]codice[/syntax] sostituendo "il_linguaggio" con il linguaggio del codice che dovete inserire, ad esempio: html, css, javascript, php, asp, ecc...

temporizzare un ciclo for Javascript

Messaggioda Matteo » lunedì 31 dicembre 2012, 0:29

ciao,
ho cercato in lungo e in largo di risolvere questo problema, di sicuro sono troppo poco esperto di javascript e quindi chiedo a chi ne sa di piu.

Ecco la situazione:
usando PHP vengono generati tramite un ciclo while una serie di div con id="riquadroN" in cui N andrà da 1 a un numero variabile. N viene assegnato a una variabile di sessione $_SESSION['indice']
fino a qui no problem.

ora però vorrei usare le funzioni hide e fade di jquery per far si che questi div appaino e scompaiano in sequenza partendo dal primo fino all'ultimo. quello che non riesco a fare è a temporizzare l'apparizione e la scomparsa...
ecco il codice javascript senza temporizzatori e usando solo hide per comodità:


Sintassi: javascript [ Scarica ] [ Nascondi ]
  1. $(window).load(function (){
  2.                 $("#button").click(function(){
  3.                         for ( i=1; i<=<?php echo $_SESSION["indice"]; ?> ; i++ ){
  4.                                 $("#riquadro"+i) .hide(1000);
  5.                         };
  6.                 });
  7.         });
  8.  


attualmente il codice funziona e mi fa sparire tutti i div, ma contemporaneamente.
come si fa a farli sparire in sequenza?
ho provato diverse soluzioni usando setTimeout , ma evidentemente mi sfugge qualcosa, come fareste voi?

grazie
Matteo

Avatar utente
 
Messaggi: 34
Iscritto il: lunedì 15 ottobre 2012, 14:43

Re: temporizzare un ciclo for Javascript

Messaggioda maxlovegods » mercoledì 2 gennaio 2013, 15:28

Ciao! Secondo me la sensazione che ti sfugga qualcosa...è giusta! :D

Vedendo il tuo codice ho visto che affidi a un ciclo for la funzione jquery per per far scomparire (o apparire) i div...
Non ti dice niente questo? A me dice una cosa...che il for agisce quanto più possibile all'istante...se così fosse (e credo proprio che si) sarebbe difficilissimo gestire delle animazioni (si ti potresti inventare qualcosa, ma vediamo di fare le cose in modo corretto).

In teoria dovresti proprio togliere il ciclo for a mio avviso e usare direttamente dei setTimeout. Questo perchè con quest'ultimo puoi gestire il tempo come tu desideri...for invece agisce come ti dicevo nel modo più istantaneo che può.

Questo succede anche nei videogiochi...c'è un loop che gira ad esempio a 24 frame al secondo. Essendo un continuo loop e sapendo appunto il numero degli fps (frame per second) non hai bisogno ne di setTimeout ne (tanto meno) di for.
Anzi...i for vengono ovviamente ultra usati...ma vengono usati all'interno dello stesso intervallo di frame (ad esempio nel frame 3 di 24 magari facendo un ciclo for di 1 < 1000). Quindi da qui capisci quanto velocemente agisce un for.

Questa è la mia esperienza...ora sta a te applicarla :)

Spero di esserti stato d'aiuto.
maxlovegods

Avatar utente
 
Messaggi: 23
Iscritto il: giovedì 20 dicembre 2012, 11:55

Re: temporizzare un ciclo for Javascript

Messaggioda Matteo » giovedì 3 gennaio 2013, 23:40

grazie,
si avevo notato che il ciclo viene eseguito immediatamente infatti, solo che cercavo una soluzione dalla sintassi semplice
... e l'ho trovata :clap:
eccola (ho usato un ciclo while ma non è quello che fa cambiare la faccenda naturalmente):

Sintassi: javascript [ Scarica ] [ Nascondi ]
  1.                         i=1;
  2.                         max=<?php echo $_SESSION["indice"]; ?>;
  3.                         while (i<=max){
  4.                                 ritardo = i*1000;
  5.                                 $("#azione"+i) .delay(ritardo) .fadeIn(400) .delay(1000) .fadeOut(400);
  6.                                
  7.                                 i++;
  8.                         };
  9.  

Naturalmente ora ho altri problemi altrove ma spero di risolverli.
In effetti questo schema mi serve proprio per un browsergame fatto in casa che sto facendo per divertirmi. :)
Matteo

Avatar utente
 
Messaggi: 34
Iscritto il: lunedì 15 ottobre 2012, 14:43

Re: temporizzare un ciclo for Javascript

Messaggioda maxlovegods » venerdì 4 gennaio 2013, 10:38

Ho capito che fai in questo codice. L'hai sistemata un po' a modo tuo diciamo XD.

Quello che mi domando, senza provarlo, è: ma il ciclo si mette in pausa e aspetta l'azione fade per passare avanti...oppure cicla cmq istantaneamente ed è la coda di effetti jquery che invece fa tutto il lavoro di temporizzazione?

A istinto mi viene che sia la seconda. Quindi è come se creassi cmq una specie di array di effetti jquery temporizzati. Beh forse non è malaccio come idea. Nei videogiochi non funziona proprio così, però se a te va perchè no.
maxlovegods

Avatar utente
 
Messaggi: 23
Iscritto il: giovedì 20 dicembre 2012, 11:55

Re: temporizzare un ciclo for Javascript

Messaggioda Matteo » venerdì 4 gennaio 2013, 16:03

si in effetti immagino che il ciclo venga effettuato tutto e che sia la funzione display di jquery che fa tutto.
mi pare una soluzione rapida e indolore, al max saranno, male che vada, 50 cicli.

ora ho un altro problema eheh
l'ho notato mettendo tutto online:
php mi genera i div che poi vengono mostrati con il suddetto ciclo while;
ho provveduto a nasconderli con il codice di sotto tramite un .hide

però i div creati in php mi appaino per un istante prima che jquery riesca a nascondermeli.

soluzioni?

Sintassi: javascript [ Scarica ] [ Nascondi ]
  1. $(window).load(function (){
  2.                 $('.r').hide();
  3.                 $('.l').hide();
  4. }
  5.  
  6.  
Matteo

Avatar utente
 
Messaggi: 34
Iscritto il: lunedì 15 ottobre 2012, 14:43

Re: temporizzare un ciclo for Javascript

Messaggioda maxlovegods » lunedì 7 gennaio 2013, 10:54

Credo (spero) di si.

invece di usare $(window).load...prova a scrivere così $(function(){...tuo codice...})

Questo in teoria dovrebbe essere l'abbreviazione di questo $(document).ready(function(){...tuo codice...})

La differenza a quanto ne so è che il secondo agisce nel momento in cui viene caricato tutto il DOM e prima ancora che vengano visualizzati o caricati tutti gli oggetti della pagina. Questo fa si che qualcosa che deve essere nascosto, venga cmq nascosto prima che appaia e quindi prima al completamento della pagina web, ma cmq dopo del caricamento del DOM in modo che il codice che esegui, lo puoi mettere anche all'inizio della pagina web (sai no, che di solito se metti il javascript prima degli oggetti con id e classi di solito non funziona, invece con load ready ecc...ti permette di aspettare che vengano caricati).

Prova così e facci sapere, poi siamo curiosi di vedere i risultati
maxlovegods

Avatar utente
 
Messaggi: 23
Iscritto il: giovedì 20 dicembre 2012, 11:55

Re: temporizzare un ciclo for Javascript

Messaggioda Matteo » lunedì 7 gennaio 2013, 19:24

si in effetti bastava togliere il $(window).load
grazie

per ora mi fermo qui con le domande, prima o poi vi sottoporrà il risultato delle mie fatiche
cioè un browsergame fatto da cani :rock: ma con molta buona volontà.
Matteo

Avatar utente
 
Messaggi: 34
Iscritto il: lunedì 15 ottobre 2012, 14:43


Torna a Javascript



cron