Il timer non funziona

[lanvoel]

Se c'è qualche cosa che non capisci o hai dei dubbi, chiedi pure.

Grazie robynosse per la tua disponibilità.
Desideravo capire meglio il perché dell'uso di removeEventListener().

Per esempio nella riga della prima tua versione:
document.getElementById("mioBottone").removeEventL istener("click",cambia);

oppure nella riga della tua seconda versione, che contiene la funzione ferma():
this.removeEventListener("click",cambia);

lanvoel

[robynosse]

Grazie robynosse per la tua disponibilit�.
Desideravo capire meglio il perch� dell'uso di removeEventListener().

Per esempio nella riga della prima tua versione:
document.getElementById("mioBottone").removeEventL istener("click",cambia);

oppure nella riga della tua seconda versione, che contiene la funzione ferma():
this.removeEventListener("click",cambia);

lanvoel

Ciao,


con la riga:

document.getElementById("mioBottone").addEventListener("click",cambia);

Stai dicendo letteralmente, partendo da destra:
aggiungi un ascoltatore di evento al click, quando questo evento si produce esegui la funzione cambia, l'elemento che voglio controllare ha l'id univoco 'mioBottone' e fa parte del mio document(la pagina).
Questo vuol dire che, ogno volta che fai click su quell'elemento, la funzione cambia viene lanciata.
All'interno della funzione cambia presta attenzione a questa linea:

intervallo=setInterval(sposta,1000);

In questa linea stiamo dicendo che dopo un secondo deve essere lanciata la funzione sposta, che non fa altro che aumentare di 50 pixel le coordinate x e y dell'oggetto con id 'mioBottone'


In pratica, ogni volta che fai click viene lanciata la funzione.
Se provi a commentare in questo modo la riga:

//this.removeEventListener("click",cambia);

Avresti quindi un comportamento anomalo del bottone che si sposta, prova a farlo e ricarica la pagina...
Ecco perch� ho messo un removeEventListener, questo toglie l'ascoltatore dell'evento assegnato e subito dopo ne assegno uno nuovo sullo stesso elemento dicendo di chiamare la funzione 'ferma' al click sul bottone:

Per esempio nella riga della prima tua versione:
document.getElementById("mioBottone").removeEventL istener("click",cambia);

oppure nella riga della tua seconda versione, che contiene la funzione ferma():
this.removeEventListener("click",cambia);

la parola this fa riferimento all'oggetto/elemento che ha generato l'evento, in questo caso il bottone con id mioBottone, ma questo vale solo per la funzione 'cambia', dal momento che la funzione 'cambia' viene lanciata al click sull'elemento mioBottone.
Nel caso specifico posso fare riferimento in 3 modi all'oggetto con id mioBottone:

document.getElementById('mioBottone')
con la variabile 'oggetto' dal momento che l'ho dichiarata fuori dalla funzione.
oppure con il this all'interno della funzione cambia


Quindi, ripetere document.getElementById('mioBottone') � ridondante e inutile.

Potresti passare la referenza this all'altra funzione, ma qui le cose si complicano(anche se non � difficile), dovresti inizare prima di tutto a capire bene cos'� il this.

Ti consiglio di provare a fare un esercizio, magari ti risulta pi� chiaro:
prova a creare 3 bottoni, tutti con la stessa classe, class="mieiBottoni".
Ad ogni bottone assegni un id diverso, bottone1, bottone2, bottone3.
Poi registri un unico ascoltatore sulla classe "mieiBottoni", getElementsByClassName chiamando la funzione miaFunzione al click di un elemento.

All'interno della funzione che chiami fai un alert(this.id);

Prova a vedere cosa succede...

Roberto

[lanvoel]

Grazie Roberto, anche per la precisione.
Commentando document.getElementById("mioBottone").removeEventL istener("click",cambia);
nel tuo primo programma, il pulsante mobile accelera se cliccato, perché si sommano gli incrementi
Commentando invece this.removeEventListener("click",cambia);
nel tuo secondo programma, il pulsante mobile non si ferma se cliccato, perché "non è ascoltato" l'evento ferma.
In conclusione removeEventListerner serve per rimuovere un evento dalla lista degli eventi, per prenderne eventualmente un altro.
Mi pare poi che this indichi l'oggetto in uso.
Quanto all'esercizio con le classi, non le uso quindi me la cavo poco.

[robynosse]

nel tuo secondo programma, il pulsante mobile non si ferma se cliccato, perché "non è ascoltato" l'evento ferma.
In conclusione removeEventListerner serve per rimuovere un evento dalla lista degli eventi, per prenderne

Esatto!
Tieni conto che in alcuni casi è molto utile rimuovere un ascoltatore di eventi, come ad esempio il click che invia dei dati ad un server remoto tramite ajax, quindi con una chiamata asincrona.
L'utente clicca sul bottone.
Verifico i dati che l'utente ha inserito.
Tolgo il listener.
Invio i dati.
Aspetto una risposta del server
Faccio una azione al ricevere i dati.
Eventualmente resetto i campi del form e riabilito il listener.

Se tu non togliessi il listener, in questo caso, l'utente potrebbe inviare più volte i dati al server, prima di ricevere i dati di risposta dal server stesso.

Roberto

[lanvoel]

Ti consiglio di provare a fare un esercizio, magari ti risulta pi� chiaro:
prova a creare 3 bottoni, tutti con la stessa classe, class="mieiBottoni".
Ad ogni bottone assegni un id diverso, bottone1, bottone2, bottone3.
Poi registri un unico ascoltatore sulla classe "mieiBottoni", getElementsByClassName chiamando la funzione miaFunzione al click di un elemento.

All'interno della funzione che chiami fai un alert(this.id);

Prova a vedere cosa succede...

Roberto

Su tuo consiglio ho incominciato a usare le classi.
Mi sembra che, se si definisce una classe, i suoi elementi hanno un indice, come si può vedere nel programma qui sotto, e non un id.
Desidererei qualche delucidazione. Grazie

lanvoel

<html>
<body>
<form name="form1">
<input type="button" class="bottoni" value="pulsante1"><br>
<input type="button" class="bottoni" value="pulsante2"><br>
<input type="button" class="bottoni" value="pulsante3"><br>
<input type="button" class="bottoni" value="pulsante4"><br><br>
<input type="button" class="bottoni2" value="pulsante5"><br>
<input type="button" class="bottoni2" value="pulsante6"><br>
<input type="button" class="bottoni2" value="pulsante7"><br>
<input type="button" class="bottoni2" value="pulsante8"><br><br>
<input type="button" id="button5" name="button5" value="cambia" onclick="cambia()"><br>
</form>
<script language=JavaScript>
function cambia()
{
var x=1
var y=1
var classe=prompt("scegli una classe:", "bottoni")
var indice=prompt("scegli un indice:", "0")
if (indice  == "0" && classe=="bottoni") {x="300"; y="1"}
if (indice  == "1" && classe=="bottoni") {x="300"; y="50"}
if (indice  == "2" && classe=="bottoni") {x="300"; y="100"}
if (indice  == "3" && classe=="bottoni") {x="300"; y="150"}
if (indice  == "0" && classe=="bottoni2") {x="600"; y="1"}
if (indice  == "1" && classe=="bottoni2") {x="600"; y="50"}
if (indice  == "2" && classe=="bottoni2") {x="600"; y="100"}
if (indice  == "3" && classe=="bottoni2") {x="600"; y="150"}
    var elemento = document.getElementsByClassName(classe);
    elemento[indice].style.backgroundColor = "cyan";
    elemento[indice].style.fontSize="40";
    elemento[indice].style.backgroundColor="cyan"
    elemento[indice].style.borderColor="blue";
    elemento[indice].style.color="red";
    elemento[indice].style.position="absolute";
    elemento[indice].style.top =y;
    elemento[indice].style.left =x;
}
</script>
</body>
</html>

[ciro78]

lanvoel cerca di rileggere il regolamento in particolare la sezione che riguarda i titoli poco chiari.

[lanvoel]

Grazie ciro78 per l'avviso, però penso che in questo caso il titolo era abbastanza chiaro, perché nel mio programmino-esercizio ciò che non funzionava era proprio il timer, usato in un certo modo.
Infatti Roberto (robynosse) ha risolto in due modi perfettamente il problema e, data la sua esplicita disponibilità, nell'ultimo intervento gli chiedevo spiegazioni circa un suo suggerimento basato sulle classi.
Un saluto

lanvoel

[ciro78]

Grazie ciro78 per l'avviso, però penso che in questo caso il titolo era abbastanza chiaro, perché nel mio programmino-esercizio ciò che non funzionava era proprio il timer, usato in un certo modo.
Infatti Roberto (robynosse) ha risolto in due modi perfettamente il problema e, data la sua esplicita disponibilità, nell'ultimo intervento gli chiedevo spiegazioni circa un suo suggerimento basato sulle classi.
Un saluto

lanvoel

ciao,la funzione è setInterval non timer. non è per essere pignoli ma un titolo pertinente favorisce molto te e chi vuole aiutarti. un esempio potrebbe essere "setInterval comportamento inaspettato se richiamato nell'onchange di un button" .

se leggi bene il regolamento capisci che titoli come "x non funziona" è scontato quanto inutile. se sei qui è perchè qualcosa non va.

se hai ancora dubbi scrivimi pure in privato

ciao

[lanvoel]

Ciao ciro78, sei stato chiarissimo e in fondo non sei un "forumista malvagio".
Un saluto

lanvoel

[robynosse]

Ciao,

di che delucidazioni avresti bisogno?
Spiega inoltre cosa volevi realizzare.

Forse, come ti ha suggerito Ciro78, sarebbe opportuno che tu aprissi una nuova discussione dal momento che siamo partiti da un argomento e stiamo passando ad un altro.

Roberto