[Javascript] focus, blur Event 처리

주기적으로 이미지가 바뀌는 기능을 setInterval 로 처리를 하였더니 다른탭에서 작업 후 다시 해당화면으로 돌아왔을때 쌓아두었던 스택이 한번에 처리되는 현상을 발견하였다.(1번탭에서 setInterval로 주기적으로 이미지를 호출하다가 다른 탭으로 이동하여 작업 후, 다시 1번탭으로 돌아왔을 때, 이미지가 정해진 주기에 따라 바뀌는것이 아닌, 이제까지 쌓여놓았던 스택을 한번에 호출하는 바람에 이미지가 클럽마냥 반짝거리면서 호출됨)

 

해당 현상을 window.addEventListener('focus'), window.addEventListener('blur') 이벤트를 사용하여 해결하였다.

 

---

 

Focus를 준 화면에 접근하였을 때

window.addEventListener('focus', function() {
    console.log('사용자가 웹페이지에 돌아왔습니다.')
}, false);

 

Focus를 준 화면에서 벗어났을 때

window.addEventListener('blur', function() {
    console.log('사용자가 웹페이지에서 벗어났습니다.')
}, false);