지속적으로 함수를 실행하십시오

Question

우수한 플렉스를 사용하여 뷰포트에있는 요소가 setInterval을 사용하여 표시되는지 확인하려면 함수가 한 번만 실행되고 요소가 표시된 경우에만 함수가 실행됩니다 (else 문을 실행해야 함).).

var checkViewport = setInterval(function() { 
    $('#colorbox').on('inview', function(event, visible) { 
     if (visible) { 
     console.log('YES'); 
     } else { 
     console.log('NO'); 
     } 
    }); 
}, 5000); 

Answer 1

이벤트를 한 번 바인드하고 별도의 변수를 확인하십시오. 이 시도 : 당신은 isVisible 전역 변수 있지 않은지 확인하기 위해 다른이를 구성 할 수 있습니다뿐만 아니라 여전히 setInterval에 액세스 할 수 있습니다

var isVisible = false; 

$('#colorbox').on('inview', function(event, visible) { 
    isVisible = visible; 
}); 

var checkViewport = setInterval(function() { 
    if (isVisible) { 
     console.log('YES'); 
    } else { 
     console.log('NO'); 
    } 
}, 5000); 

.

Answer 2

예제의 코드는 요소가 뷰포트에있을 때만 이벤트를 바인딩합니다. 실제로 아무것도 실행하지 않고 반복적으로 이벤트를 바인딩합니다.

각 간격마다 요소 colorbox을 확인한 다음 colorbox이 표시되는지 여부를 콘솔에 기록하는 것이 좋습니다.

소스 (HTML DOM 및 자바 스크립트) :

var checkViewport = setInterval(function() { 
    myColorBox = document.getElementById("colorbox"); 
     if (myColorBox.style.visibility == "visible") { 
     console.log('YES'); 
     } else { 
     console.log('NO'); 
     } 
    }); 
}, 5000);