잊어버린 타이머/콜백
자바스크립트에는 setTimeout()과 setInterval()이라는 두 가지 타이밍 이벤트가 있습니다. 전자는 지정된 밀리초 동안 기다린 후 함수를 실행하는 반면, 후자는 주기적으로 함수를 실행합니다(특정 시간 간격마다 반복).
객체가 타이머 콜백에 연결되면 타임아웃이 발생할 때까지 해제되지 않습니다. 이 시나리오에서 타이머는 자체적으로 재설정되고 가비지 수집기가 메모리를 제거하는 것을 허용하지 않아 시간 초과가 완료될 때까지 영원히 실행됩니다. 이러한 타이머는 자바스크립트에서 가장 빈번한 메모리 누수 원인입니다.
예시
다음 예제에서 타이머 콜백과 연결된 객체(tiedObject)는 타임아웃이 끝날 때까지 해제되지 않습니다. 그 동안 타이머는 자체적으로 재설정되고 영원히 실행되므로 원래 개체에 대한 참조가 없더라도 메모리 공간이 수집되지 않습니다.
<html>
<body>
<script>
for (var i = 0; i < 100000; i++) {
var tiedObject = {
callAgain: function() {
var text = this;
var value = setTimeout(function() {
text.callAgain();
}, 100000);
}
}
tiedObject.callAgain();
tiedObject = null;
}
</script>
</body>>
</html> 메모리 누수 방지
1. 누수를 방지하려면 setInterval()/setTimeout() 내부에 참조를 제공하여 가비지 수집 전에 함수를 실행해야 합니다.
2. 더 이상 필요하지 않은 기능을 제거하기 위해 직접 호출하십시오.
IE와 같은 오래된 브라우저를 제외하고 크롬 등의 최신 브라우저는 대부분 이러한 문제에 직면하지 않습니다. 더 중요한 것은 jquery와 같은 라이브러리가 내부적으로 누수 문제가 발생하지 않도록 처리한다는 것입니다.