Funzione di chiamata sullo scorrimento una sola volta

Question

Ho una domanda riguardante una funzione che verrà chiamata se l'oggetto si trova all'interno del mio schermo. Ma quando l'oggetto è nel mio schermo, la funzione è stata richiamata e un avviso è stato attivato. Ma se chiudo l'avviso e scorro più in basso, l'evento viene richiamato di nuovo. Non voglio quello. Come posso risolverlo?

Working example

Il mio codice finora:

<div id="wrapper"> 
    scroll down to see the div 
</div> 
<div id="tester"></div> 

JS

$(window).on('scroll',function() { 
    if (checkVisible($('#tester'))) { 
     alert("Visible!!!")   
    } else { 
     // do nothing 
    } 
}); 

function checkVisible(elm, eval) { 
    eval = eval || "object visible"; 
    var viewportHeight = $(window).height(), // Viewport Height 
     scrolltop = $(window).scrollTop(), // Scroll Top 
     y = $(elm).offset().top, 
     elementHeight = $(elm).height(); 

    if (eval == "object visible") return ((y < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight))); 
    if (eval == "above") return ((y < (viewportHeight + scrolltop))); 
} 

Quello che voglio è che la funzione Se solo si chiamerà 1 ora e non su ogni rotolo se l'oggetto è visibile

Answer 1

Provare a utilizzare .one():

$(window).one('scroll',function() { 
    // Stuff 
}); 

Oppure, scollegare l'evento all'interno:

$(window).on('scroll',function() { 
    // After Stuff 
    $(window).off('scroll'); 
}); 

Immagino che si potrebbe bisogno di questo codice:

$(window).on('scroll',function() { 
    if (checkVisible($('#tester'))) { 
     alert("Visible!!!"); 
     $(window).off('scroll'); 
    } else { 
     // do nothing 
    } 
}); 

Fiddle: http://jsfiddle.net/c68nz3q6/

Answer 2

quando il test $ è all'interno della schermata, rimuovere il listener di eventi.

$(window).on('scroll',function() { 
    if (checkVisible($('#tester'))) { 
     alert("Visible!!!") 
     $(window).off('scroll'); 
    } else { 
    // do nothing 
    } 
}); 

Answer 3

Proviamo a risolvere il problema in javascript poiché tutte le risposte qui sono in jQuery. È possibile utilizzare la variabile globale in quanto il browser mantiene il proprio valore finché la pagina non viene aggiornata. Tutte le variabili dichiarate al di fuori della funzione sono chiamate variabili globali e sono accessibili da qualsiasi funzione.

window.onscroll = myScroll; 
 
var counter = 0; // Global Variable 
 
function myScroll(){ 
 
    var val = document.getElementById("value"); 
 
    val.innerHTML = 'pageYOffset = ' + window.pageYOffset; 
 
    if(counter == 0){ // if counter is 1, it will not execute 
 
    if(window.pageYOffset > 300){ 
 
     alert('You have scrolled to second div'); 
 
     counter++; // increment the counter by 1, new value = 1 
 
    } 
 
    } 
 
    }

#wrapper,#tester { 
 
    width: 300px; 
 
    height: 300px; 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
    } 
 
#wrapper p { 
 
    text-align: center; 
 
    } 
 
#tester { 
 
    border: 1px solid crimson; 
 
    } 
 
#value { 
 
    position: fixed; 
 
    left: auto; 
 
    right: 40px; 
 
    top: 10px; 
 
    }

<p id = "value"></p> 
 
<div id="wrapper"> 
 
    <p>scroll down to div to see the alert</p> 
 
</div> 
 
<div id="tester"></div>

Answer 4

utilizzare una funzione nome

function fname() 
{ 
} 
$(window).on('scroll',fname); 
$(window).off('scroll',fname);