자바 스크립트, jQuery 및 'this': 여기에 무슨 일이 있습니까?

Question

이것은 내 코드에서 어떤 일이 벌어지고 있는지에 대한 질문입니다. 그것은 작동하지만 약간의 깨달음이 필요합니다 ...

텍스트 입력 요소에 이벤트 수신기를 만들려면 jQuery를 사용하고 있습니다. 다음과 같이 HTML은 단순히 다음과 같습니다

<input type="text" id="autocomplete" size="50" /> 

내가 누군가 유형의 해당 필드에 무엇인가, 그리고 피하기 위해 내가 타이머와 함께 이벤트 리스너를 설정 한 이벤트와 침수되는 때마다 이벤트를 수신 할 필요가 내 이벤트 있도록 사용자가 125 ms 동안 아무 것도 입력하지 않은 경우 리스너 코드는 실행 :

jQuery('#autocomplete').keyup(function(e) { 
    e.preventDefault(); 
    clearTimeout(this.timer); 
    this.timer = setTimeout(function() { 
    jQuery.getJSON([URL goes here], function(data) { 
     // processing of returned data goes here. 
    } 
    }, 125); 

console.log(this); 
}); 

이 작동하지만, 나는 모든 일이 일어나고 이해한다면 아주 확실하지 않다. 위의 코드에서 알 수 있듯이 마지막 이벤트에서 생성 된 타이머의 ID을 추적해야합니다. 나는 그것을 this.timer에 저장함으로써 그렇게한다. 그러나이 경우 this 키워드는 입력 요소를 나타냅니다.

<input type="text" id="autocomplete" size="50" /> 

는 입력 요소에 타이머 ID를 저장하기 위해 OK인가 :이 무엇 console.log 출력입니까? 내가 아는 한 모두, 나는 바보 같은 짓을 할 수있다. 이것은 "모범 사례"입니까, 아니면 다른 무엇인가?

Answer 1

일반적으로 DOM 개체에 직접 추가 값을 배치하지 않는 것이 좋습니다. DOM이 성숙함에 따라, 당신이 선택한 네임 스페이스가 다른 목적을 위해 DOM에 의해 사용될 수있는 가능성은 희박합니다. 이 다른 스크립트뿐만 아니라 확실히 이름이 변수 인 이름 공간 충돌이 발생할 수 있습니다. 이 작업을 수행해야하는 경우 모호한 네임 스페이스를 사용하여이 위험을 완화하십시오. 이전 버전의 IE도 DOM 노드를 직렬화 할 때 이상한 동작을 보일 수 있습니다. 노드의 실제 속성이 매우 이상한 값인 timer라는 결과를 초래할 수 있습니다. 이뿐 아니라 console.log은 DOM 노드 속성 목록을 반환하지 않으므로 디버깅이 더 복잡해집니다.

일반적으로 DOM을 그대로두고 문서 개체가 정의한 속성을 참조하는 것이 좋습니다. 제 생각에는 타이머를 처리기와 함께 익명 함수 내에서 공용 정적 변수와 동등한 위치에 두는 것이 더 좋습니다. 타이머를 실수로 덮어 쓰고 코드 모듈을 유지할 수있는 범위 문제를 피할 수 있습니다.

(function($) { 

    // Static variable for this function 
    var keyupTimer; 

    // Event handler for keyup 
    $('#autocomplete').keyup(function(event) 
    { 
     event.preventDefault(); 

     clearTimeout(keyupTimer); 

     keyupTimer = setTimeout(function() 
     { 
      $.getJSON([URL goes here], function(data) 
      { 
       // processing of returned data goes here. 
      } 
     }, 125); 
    }); 
})(jQuery);