특정 시간동안 속성 변화 감지하기

간혹 특정시간동안 어떤 element의 속성이나 특성을 감지해야할 필요가 있는데

 

이때 Jquery가 아닌 javascript trick을 이용하여 속성 감지를 할 수 있다.

 

아래 코드를 통해 확인해보자.

<script>
	var maxTime = 60000, startTime = Date.now();
	var interval = setInterval(function () {
		if ($('#container').is(':visible')) {
			// visible, do something
			if (Date.now() - startTime > maxTime) {
				clearInterval(interval);
			}
		} else {
			if(document.getElementById('container') == null) {
				document.getElementById('id-name').style.display = "none";
			}
			clearInterval(interval);
		}
	}, 100);
</script>

 

우선 최대 감지 시간을 60000 즉, 60초로 설정해 두었다.

이때 setInterval을 통해 0.1초마다 한번씩 확인해주고

 

if(Data.now() - startTime > maxTime)에서 시작으로부터 60초가 지나면 clearInterval을 통해 현재 감시를 종료시킨다.

 

그게 아닐 경우 여기서는 해당 id가 없다면 특정 id의 display 속성을 none으로 변경해주는 방식이다.