Funktion nur beim Scrollen aufrufen

Question

Ich habe eine Frage bezüglich einer Funktion, die aufgerufen wird, wenn das Objekt auf meinem Bildschirm ist. Aber wenn sich das Objekt in meinem Bildschirm befindet, wurde die Funktion aufgerufen und ein Alarm ausgelöst. Aber wenn ich den Alarm schließe und weiter nach unten scrolle, wird das Ereignis erneut aufgerufen. Ich möchte das nicht. Wie kann ich das lösen?

Working example

Mein Code so weit:

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

Was ich will, ist, dass die If-Funktion wird nur 1 Mal und nicht auf jedem blättern aufgerufen werden wenn das Objekt sichtbar ist.

Answer 1

Versuchen .one() mit:

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

Oder entkoppeln das Ereignis innen:

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

Raten Sie könnte diesen Code benötigen:

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

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

Answer 2

Wenn der $ test in Ihrem Bildschirm angezeigt wird, entfernen Sie den Ereignislistener.

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

Answer 3

Lassen Sie uns versuchen, Ihr Problem in Javascript zu lösen, da alle Antworten hier in jquery sind. Sie können die globale Variable verwenden, da der Browser seinen Wert beibehält, solange die Seite nicht aktualisiert wird. Alle diese Variablen, die außerhalb der Funktion deklariert sind, heißen globale Variablen und können von jeder Funktion aufgerufen werden.

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

eine Funktion Name

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