Far fare una funzione solamente una volta

[dokkalemon]

Ciao ragazzi, sono uno che fa codici per passione e mi sono imbattuto in un problema che sicuramente riuscireste a risolvere a occhi chiusi. Spero in un'Anima Pia che possa darmi una mano.

Praticamente in una pagina ho messo un video avente questo codice HTML:

<video paused aria-hidden="true" id="myVid" src="video/miovideo.mp4" type="video/mp4">

in Javascript praticamente ho stabilito che il video deve andare in play dopo i 650px con questo codice:

window.onscroll = function() {scrollFunction()};

function scrollFunction() {

if (document.body.scrollTop > 650  ||  document.documentElement.scrollTop > 650) {
document.getElementById('myVid').play() 
} else {
document.getElementById('myVid').pause()
}

Ora la mia domanda � questa:
Visto considerato che va in play superando sempre i 650 px, ovviamente se torno sopra i 650 px e torno giu di nuovo, il video si mette in play di nuovo. Vorrei evitarlo!
C'è un modo che una volta fatta la funzione, non si ripeta pi�? Posso far in modo che il video venga messo in play solamente una volta?

PS: un modo l'ho anche trovato � quello di togliere l'id al tag <video> ma cos� facendo poi guardando la consolle del browser mi da errore ed � una cosa che non tollero!

[ciro78]

Ciao ragazzi, sono uno che fa codici per passione e mi sono imbattuto in un problema che sicuramente riuscireste a risolvere a occhi chiusi. Spero in un'Anima Pia che possa darmi una mano.

Praticamente in una pagina ho messo un video avente questo codice HTML:

<video paused aria-hidden="true" id="myVid" src="video/miovideo.mp4" type="video/mp4">

in Javascript praticamente ho stabilito che il video deve andare in play dopo i 650px con questo codice:

window.onscroll = function() {scrollFunction()};

function scrollFunction() {

if (document.body.scrollTop > 650  ||  document.documentElement.scrollTop > 650) {
document.getElementById('myVid').play() 
} else {
document.getElementById('myVid').pause()
}

Ora la mia domanda � questa:
Visto considerato che va in play superando sempre i 650 px, ovviamente se torno sopra i 650 px e torno giu di nuovo, il video si mette in play di nuovo. Vorrei evitarlo!
C'è un modo che una volta fatta la funzione, non si ripeta pi�? Posso far in modo che il video venga messo in play solamente una volta?

PS: un modo l'ho anche trovato � quello di togliere l'id al tag <video> ma cos� facendo poi guardando la consolle del browser mi da errore ed � una cosa che non tollero!

Ciao e benvenuto sul forum,
ti invito a leggere il regolamento del forum stesso ed in particolare la sezione di titoli e utilizzo del tag code.

In merito al tuo problema ti basta mettere una variabili di controllo.

var eseguito = false;

window.onscroll = function() {scrollFunction()};

function scrollFunction() {

if (!eseguito && (document.body.scrollTop > 650  ||  document.documentElement.scrollTop > 650)) {
document.getElementById('myVid').play();
eseguito =  true;
} else {
document.getElementById('myVid').pause()
}

[KillerWorm]

Ciao, si può risolvere in millemila modi. Per logica, se vuoi che vada in play e non si interrompa, non serve applicare la pausa, basta eliminare la riga in cui c'è quel pause().

Un approccio migliore può essere quello di usare, al posto del gestore onscroll, i metodi addEventListener() e removeEventListener(), in modo da applicare inizialmente la funzione come gestore dello scroll e rimuoverla non appena avviene la condizione specifica.

Qui un esempio:

window.addEventListener('scroll', function playVideo(){
   if (document.body.scrollTop > 650 || document.documentElement.scrollTop > 650) {
      document.getElementById('myVid').play();
      window.removeEventListener('scroll', playVideo);
   } 
});

Poi, ripeto, si può fare in tanti altri modi.



EDIT: anche come suggerisce ciro78, con un flag ... ho visto la risposta qualche minuto dopo