Funkcja wywołania na przewijanie tylko raz

Question

Mam pytanie dotyczące funkcji, która zostanie wywołana, jeśli obiekt znajduje się na moim ekranie. Ale kiedy obiekt znajduje się na moim ekranie, funkcja jest wywoływana, a alarm jest uruchamiany. Ale jeśli zamknę alert i przejdę dalej, wydarzenie zostanie ponownie wywołane. Nie chcę tego. Jak mogę to rozwiązać?

Working example

Mój kod do tej pory:

<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))); 
} 

Co chcę jest, że tylko funkcja Jeśli zostanie wywołana 1 raz i nie na każdym zwoju jeśli obiekt jest widoczny.

Answer 1

Spróbuj użyć .one():

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

Albo odłączyć zdarzenie wewnątrz:

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

Guess można trzeba ten kod:

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

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

Answer 2

gdy test $ znajduje się na twoim ekranie, usuń detektor zdarzeń.

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

Answer 3

Spróbujmy rozwiązać problem w javascript, ponieważ wszystkie odpowiedzi tutaj są w jquery. Możesz użyć zmiennej globalnej, ponieważ przeglądarka zachowuje swoją wartość, o ile strona nie zostanie odświeżona. Wszystkie te zmienne zadeklarowane poza funkcją są nazywane zmiennymi globalnymi i można do nich uzyskać dostęp za pomocą dowolnej funkcji.

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

użyć funkcji nazwę

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