Chức năng gọi khi di chuyển chỉ một lần

Question

Tôi có một câu hỏi liên quan đến một chức năng sẽ được gọi nếu đối tượng nằm trong màn hình của tôi. Nhưng khi đối tượng nằm trong màn hình của tôi, hàm này được gọi và cảnh báo được kích hoạt. Nhưng nếu tôi đóng cảnh báo và di chuyển xuống dưới sự kiện được gọi lại. Tôi không muốn điều đó. Làm thế nào tôi có thể giải quyết điều đó?

Working example

Mã của tôi cho đến nay:

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

Những gì tôi muốn là các chức năng Nếu chỉ sẽ được gọi 1 lần và không phải trên mỗi cuộn nếu đối tượng có thể nhìn thấy.

Answer 1

Hãy thử sử dụng .one():

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

Hoặc, bỏ liên kết sự kiện bên trong:

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

Đoán bạn có thể cần mã này:

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

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

Answer 2

khi thử nghiệm $ nằm trong màn hình của bạn, hãy xóa trình xử lý sự kiện.

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

Answer 3

Hãy cố gắng giải quyết vấn đề của bạn trong javascript vì tất cả các câu trả lời đều ở dạng jquery. Bạn có thể sử dụng biến toàn cầu khi trình duyệt giữ lại giá trị của nó miễn là trang không được làm mới. Tất cả các biến được khai báo bên ngoài hàm này được gọi là các biến toàn cầu và có thể được truy cập bởi bất kỳ hàm nào.

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

sử dụng một hàm tên

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