Javascript 로 다중창 감지

JavaScript(Jquert) 로 다중창 체크를 위한 코드를 생각해보았다.

jquery를 이용하여 특정 사이트 API에 접근하여 파싱을 하는 유저스크립트 코드가 있다.

그런데 해당 페이지가 여러 창이 열려있는 경우, 가장 마지막으로 열린 창에서만 파싱 함수를 실행하고싶다.

(유저스크립트와 JavaScript 특성 상 클라이언트 단에서 API가 호출되기 때문에 API 로드를 줄이기 위한 목적이 있다.)

따라서 다음과 같은 방법을 구상해보았다.

1. 쿠키를 하나 만든다.

2. 매 페이지에 처음 접속할 때 쿠키의 내용을 고유한 값을 가지도록 갱신한다.

3. 동시에 해당 값을 변수에 저장한다.

4-1. 원하는 함수(내 경우에는 API CALL) 실행 전, 쿠키값과 변수값이 같은지 비교하여 같을 때만 함수를 실행한다.

4-2. 일정 시간 간격으로 쿠키값과 변수값이 같은지 비교하여 사용자에게 멀티창이 감지되었음을 알린다.

창이 여러개 열려있는 상태에서 쿠키 값은 공유되고 변수값은 공유되지 않는 것을 이용했다.

다른 방법이 있을 것 같은데... 그냥 하나의 방법이라고 생각하자.

// jquery, jquery cookie 를 사용함
unique_window_check = true; // 다른 함수에서 체크하는 Boolean 값
function multiwindow_prevent() {
    unique_window = new Date();
    unique_window = Number(unique_window.getTime());

    // 현재 시간값을 담은 쿠키 생성
    $.cookie('unique_window', unique_window, { expires : 30, path : '/' });

    // 1000ms 간격으로 확인
    setInterval(function() {
          // 쿠키값 체크
          unique_window_cookie = Number($.cookie('unique_window'));

          // 쿠키값과 변수값이 다른 경우
          if((unique_window_check==true)&&(unique_window != unique_window_cookie)) {
                  unique_window_check = false; // Boolean 값을 False 로 변경
                  // 멀티 윈도우 감지했을 때 실행하고 싶은 코드를 이곳에 적는다.
                  // 또는 다른 함수에서 unique_window_check 값을 체크하여도 된다.
          }
    }, 1000);
}

var checker = setInterval(function() ~ 과 같이 정의하고 멀티윈도우를 감지한 경우

if문 내에서 clearInterval(checker) 과 같이 적어서 setInterval 함수를 해제할 수도 있다.

https://stackoverflow.com/questions/16599878/can-clearinterval-be-called-inside-setinterval

setInterval 을 안 쓰는 방법도 있을 것 같은데 퍼포먼스에 큰 문제가 없어서 그냥 이대로 쓰기로 하였다.