Làm thế nào để dừng di chuyển() kích hoạt các sự kiện nhiều lần

Question

Im sử dụng jquery.visible.js để phát hiện khi một DIV ở chế độ xem (nó bắt đầu hoạt ảnh khi cắm vào có hiệu ứng hoạt hình vòng tròn). Nhưng nó tiếp tục bắn mỗi khi tôi sử dụng bánh xe cuộn, nhân bản thân vô thời hạn và tôi không thể tìm thấy một cách để ngăn chặn nó với off() hoặc unbind()? cảm ơn!

// Check vertical for circliful using jquery.visible.js 
$(window).scroll(function(){ 
    if ($("#moreSection").visible(true)){ 


     // trigger circliful 
     $('#myStat-1').circliful() // this wont stop firing 

} 
}); 

Answer 1

như #Shikkediel chỉ ra scroll() bị sa thải vào những thay đổi tỷ lệ khung hình. vì vậy mọi cuộn giấy có thể kích hoạt hàng trăm lần.

bạn có thể làm điều này:

$(window).scroll(function(){ 
    if ($("#moreSection").visible(true)){ 
     doActionAndStopScript(); 
    } 
}); 

function doActionAndStopScript(){ 
    $('#myStat-1').circliful() // now it will fire once 
    $(window).unbind('scroll'); 
} 

bạn chỉ có thể gọi unbind() từ bên ngoài $(window)

Answer 2

Sự kiện scroll sẽ cháy một lần cho mỗi pixel được cuộn. Để khắc phục hành vi này, bạn có thể sử dụng bộ hẹn giờ sẽ chỉ thực hiện logic sau khi di chuyển của bạn đã dừng trong x mili giây. Hãy thử điều này:

var timer; 
$(window).scroll(function() { 
    clearTimeout(timer); 
    timer = setTimeout(function() { 
     if ($("#moreSection").visible(true)){ 
      $('#myStat-1').circliful(); 
     } 
    }, 250); 
}); 

250ms thường đủ dài để chờ để kích hoạt mã của bạn. Bạn có thể điều chỉnh giá trị này theo yêu cầu.