함수 바인딩 window.scroll에서 fire ajax 호출을 조건부 검사마다 한 번만 수행하십시오.

Question

대상이 div인지를 감지하는 fiddle을 가지고 있습니다. 그러나 DOM 요소가 여러 번 대신 뷰포트에있는 경우 하나의 아약스 호출 만 실행하고 싶습니다. 어떻게해야할까요? 이 window.scroll에 결합 될 때

if(isTargetVisble()) { // if target element is visible on screen after DOM loaded 
    $('.log').html('<div class="alert alert-success">target element is visible on screen</div>'); // log info 
    alert('this is going to be the ajax call') 
} else { 
    $('.log').html('<div class="alert">target element is not visible on screen</div>'); // log info 
} 

그것은 지금 여러 alert()을 발사한다. 어떻게 볼 수있을 때 방금 화재가 날 수 있습니까?

Answer 1

변수를 사용하여 대상의 표시 상태를 추적합니다. 각 스크롤에서 isTargetVisble()의 새 값과 이전 값을 비교합니다.

var _alreadyVisible = false; 
$(window).scroll(function(){ // bind window scroll event 
    if($('.target').length > 0) { // if target element exists in DOM 
     if(isTargetVisble()) { // if target element is visible on screen after DOM loaded 
      if(_alreadyVisible){ 
       //ignore the scroll 
      } else { 
       //the target just became visible 
       _alreadyVisible = true; 
       console.log('target became visible') 
       $('.log').html('<div class="alert alert-success">target element is visible on screen</div>'); // log info 
      } 
     } else { 
      if(_alreadyVisible){ 
       //the target was just hidden 
       _alreadyVisible = false; 
       $('.log').html('<div class="alert">target element is not visible on screen</div>'); // log info 
       console.log('target became invisible') 
      } else { 
       //ignore 
      } 
     } 
    } 
}); 

보기이 fiddle (F12와 콘솔을 가져오고 대상이 아닌 모든 스크롤에 대한 가시성을 변경하는 경우에만 로그가 얼마나주의)