bool을 Google지도 리스너에서 사용하는 방법?

Question

나는이 문제에서 4 시간 멈췄다. if은 google maps 이벤트가 호출 될 때 나의 bool을 무시한다. 다른 데이터를 매개 변수로 전달해야합니다. 어쩌면 세상에 누군가 왜 그런지 알 수 있을까요?

은 같은 시간에 클릭 후

CONSOLE.LOG 던져 :

true beafore click 
stack.html:56[object HTMLDivElement]in listener 
stack.html:62[object HTMLDivElement]bunga bunga 

는

깨진 부울 :

this.b = true; 
... 
console.log(this.b + " beafore click"); 
this.mapListener = google.maps.event.addListener(map, 'click', function(e) { 
    console.log(this.b + "in listener"); 
    if (this.b==true) { 
     console.log(this.b + "true works"); 
     tools[type](e.latLng, last_marker_origin); 
     this.b = false; 
    } else { 
     console.log(this.b + "bunga bunga"); 
     //tools[type](e.latLng); 
    } 
}); 

this 거짓에 설정 내 오브젝트의 기본에에 "속성"을 의미하지만 옵션을 변경할 때 참으로 플래그입니다.

나는 지금 잠 들어 있습니다. 나는 아침에 대답 할게.

Answer 1

this은 (는) 더 이상 properties에 대한 유효한 참조가 아닙니다. 특정 문제를 해결하는 가장 간단한 방법은 코드를 변경하는 것입니다

this.b = true; 
var props = this; 
console.log(this.b + " beafore click"); //Notice that "this" is still valid here 
this.mapListener = google.maps.event.addListener(map, 'click', function(e) { 
    console.log(props.b + "in listener"); 
    if (props.b == true) { 
     console.log(props.b + "true works"); 
     tools[type](e.latLng, last_marker_origin); 
     props.b = false; 
    } else { 
     console.log(props.b + "bunga bunga"); 
     //tools[type](e.latLng); 
    } 
}); 

근본적인 문제는 실제로 콜백 함수에 호출을 코드가 완전히 다른 범위에 있으므로 this의 의미이다 해당 코드가 실행되면 변경되었습니다. 참조를 설정하고 코드에 넣으면 문제가 해결됩니다.

Answer 2

여기서 문제는 this의 범위입니다. 클릭 이벤트 핸들러 함수 this 내부에있을 때 더 이상 속성 객체를 참조하지 않고 이벤트 처리기를 참조하십시오. 이벤트 핸들러는 closure입니다.

두 가지 가능한 해결책이 있습니다.

1. 이 값을 지역 변수 (대신 this.b의 var b)를 사용하여, 지역 변수는 폐쇄 복사, 그래서 값이 내부와 폐쇄의 외부에서 사용할 수 있습니다

   var b = true; 
   console.log(b + " beafore click"); 
   this.mapListener = google.maps.event.addListener(map, 'click', function(e) { 
       console.log(b + "in listener"); 
       if (b==true) { 
        console.log(b + "true works"); 
        tools[type](e.latLng, last_marker_origin); 
        b = false; 
       } else { 
        console.log(b + "bunga bunga"); 
        //tools[type](e.latLng); 
       } 
   }); 
   

2. //save this in a locale variable, now 'me' provides access to this scope 
   var me = this; 
   me.b = true; 
   console.log(me.b + " beafore click"); 
   this.mapListener = google.maps.event.addListener(map, 'click', function(e) { 
       console.log(me.b + "in listener"); 
       if (me.b==true) { 
        console.log(me.b + "true works"); 
        tools[type](e.latLng, last_marker_origin); 
        me.b = false; 
       } else { 
        console.log(me.b + "bunga bunga"); 
        //tools[type](e.latLng); 
       } 
   }); 
   

:이 범위 지정 문제를 방지 할 수있는 매우 일반적인 기술이다, 지역 변수에 this 절감