Eseguire il codice dopo ogni prompt

**lanvoel** · 08-04-2021, 09:17

Con questo codice vorrei eseguire una intervista e cioè dopo ogni prompt di domanda scrivere nella textarea la sua risposta, invece questo codice esegue prima tutti i prompt di domanda e poi tutte le risposte insieme nella textarea.
Come ovviare? Grazie

lanvoel

codice:

<!doctype html>
<html>
<body>
<textarea name="area1" id="area1" cols=70 rows=20>
</textarea>
<script>
let mesi=1
let giorni=1
function mesi_giorni(nome,anni){
mesi=12*anni;
giorni=365*anni;
area1.value= area1.value +nome +", se hai " + anni +" anni, avrai " + mesi + " mesi e " + giorni + " giorni";
}
nome=prompt("Come ti chiami","");
area1.value="Salve a te, " + nome +"\r\n";


anni=prompt("Quanti anni hai?","")
mesi_giorni(nome, anni);


</script>
</body>
</html>

**KillerWorm** · 08-04-2021, 22:19

Ciao, giusto qualche chiarimento prima di consigliarti qualcosa: le finestre di dialogo (vedi alert, prompt, confirm), sebbene vengano aperte tramite JavaScript, sono parte dall'interfaccia stessa del browser; cioè il loro aspetto e, nello specifico, il loro comportamento dipende dal browser e può quindi differire da browser a browser.

In linea di massima, quando si apre una finestra di dialogo, viene bloccato il flusso di esecuzione della pagina del browser, cioè la pagina "resta in attesa" finché la finestra di dialogo non viene chiusa; ciò significa che l'interazione, da parte dell'utente, col resto degli elementi sulla pagina viene momentaneamente interrotta, nonché l'esecuzione del codice JavaScript (successivo all'istruzione di apertura della finestra di dialogo) resta in attesa finché non viene chiusa tale finestra.

Nel caso (come il tuo) di una successione di apertura di più finestre (all'interno dello stesso blocco di script), ho potuto constatare personalmente che su Chrome e Edge, viene attesa la chiusura di tutte le finestre aperte prima che avvenga il rendering della pagina (cioè prima che compaiano i contenuti), mentre su FireFox, ad esempio, sono mostrati i contenuti man mano, prima dell'apertura della finestra di dialogo, e quindi aggiornati dopo la chiusura di ogni finestra.

Dalla tua descrizione suppongo che tu non stia usando FireFox.

Posso solo ipotizzare che questo diverso comportamento sia dovuto al modo con cui ogni browser gestisce la fase di aggiornamento dei contenuti della pagina e del rendering stesso. Dal momento che, all'apertura di una finestra di dialogo, l'intera pagina, e così anche l'esecuzione del resto dello script, restano in standby (per così dire), è possibile che alcuni browser, a differenza di altri, non effettuino il rendering finché non sia terminata l'esecuzione di quell'intero blocco di script.

Questo accade perché tali finestre funzionano in modo "sincrono" durante l'esecuzione dello script.

Dal momento che non esistono eventi per queste finestre di dialogo (ad esempio un evento che sia scatenato alla chiusura) non è possibile gestirle in modo asincrono. Si potrebbe però pensare di "eventizzare" (passami il termine) l'apertura di tali finestre, così che in qualche modo risulti "asincrona" rispetto al blocco di script attualmente in esecuzione, permettendo quindi l'esecuzione del rendering.

Per fare questo si potrebbe usare il metodo setTimeout() frammentando le varie parti in un modo del genere:

codice:

setTimeout(function(){
   nome = prompt("Come ti chiami","");
   area1.value = "Salve a te, " + nome + "\r\n";
},100)

setTimeout(function(){
   anni = prompt("Quanti anni hai?","")
   mesi_giorni(nome, anni);
},100)

Da quel che ho provato, in questo modo ottengo un comportamento simile sui vari browser, cioè dopo ogni risposta appare il contenuto aggiornato nella textarea. Il valore 100 (millisecondi della funzione setTimeout) è arbitrario; è un valore minimo che consentirebbe al browser di "forzare" il rendering della pagina; provando con valori più basi ho potuto riscontrare infatti che su Chrome e Edge continua a non aggiornarsi la pagina finche non si chiudono tutte le finestre.

Non è comunque garantito che funzioni o continui a funzionare allo stesso modo sui vari browser.

Un'alternativa alle finestre di dialogo integrate, è l'uso di qualche plugin JavaScript/jQuery con cui è possibile ottenere delle finestre modali pop-in, cioè create con elementi stessi del DOM, all'interno della pagina, che possono essere quindi personalizzate e gestite sotto ogni aspetto. Sul web ne puoi trovare di ogni genere e specie a seconda delle esigenze; prova eventualmente a fare qualche ricerca del tipo: "javascript modal plugin"
Dai magari uno sguardo per capire cosa possa servire nel tuo caso e, se pensi possa andare bene, prova ad impostarlo nel tuo script.

Per il momento è tutto, se hai difficoltà chiedi pure

**lanvoel** · 08-04-2021, 22:48

Grazie KillerWorm. La tua soluzione va benissimo. Grazie anche per tutte le dettagliate spiegazioni e per i consigli che approfondirò

lanvoel

Discussione: Eseguire il codice dopo ogni prompt

Strumenti discussione

Ricerca discussione

Visualizza

Eseguire il codice dopo ogni prompt

Permessi di invio