TIL
일출일몰 시간 오류고치기
- 문제점 : 카카오맵 api에서 마커에 마우스오버시 일출일몰시간이 뜨는 것이 나의 미션이었는데 빠르게 여러 마커에 마우스오버를 반복할 경우 일출일몰이 한번만 출력되는 것이 아니라 여러 번 출력된다.
마우스를 가져다 댄 후에는 출력되고 마우스를 마커에서 떼었을 때에는 나타나지 않도록 했는데 이 문제점은 마우스를 가져다댔을때 실행되는 함수에도 empty를 써주어 출력되기전에 일출일몰이 나타나는 곳을 전부 비워주었다
for (let i = 0; i < positions.length; i++) {
var imageSize = new kakao.maps.Size(24, 35); // 마커 이미지의 이미지 크기 입니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize); // 마커 이미지를 생성합니다
// 마커를 생성합니다
let marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions[i].latlng, // 마커를 표시할 위치
title: positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
image: markerImage, // 마커 이미지
clickable: true,
});
kakao.maps.event.addListener(marker, 'mouseover', function () {
show_time(marker)
});//클릭하면 일출일몰시간보임
kakao.maps.event.addListener(marker, 'mouseout', function () {
delete_time()
});
}
function show(longitude, latitude, date,place_title) {
console.log(longitude)
console.log(latitude)
$.ajax({
type: "GET",
url: "/time?&long=" + longitude + "&lati=" + latitude + "&date=" + date,
dataType: 'xml',
success: function (response) {
var nameList=``;
nameList+=place_title
$('#place-title').empty();
$('#place-title').append(nameList);
xmlParsing(response);
},
error: function (xhr, status, msg) { // 통신 실패시 호출해야하는 함수
console.log('상태값 : ' + status + ' Http에러메시지 : ' + msg);
},
});
}
function xmlParsing(data) {
var riseList = ``; //일출
var setList = ``; //일몰
$(data).find('items').each(function (index, item) {
$('#sunrise').empty();
$('#sunset').empty();
riseList += `${$(this).find('sunrise').text()}`;
setList += `${$(this).find('sunset').text()}`;
$('#sunrise').append(riseList);
$('#sunset').append(setList);
});
}
}
javascript 콜백함수 - var과 let
- 문제점 : 마우스이벤트에 명소타이틀 출력이슈를 담당하며 몰랐던 문제점을 발견했다. 지역의 명소들을 for문으로 돌면서 명소마다 마커를 생성하였다. 이때 var marker = ~ 로 생성하고 그에 대한 마우스이벤트를 각각 발생시켰는데 막상 출력시켜보니 맨 마지막 marker에만 이벤트가 등록된 것 같았다.
- 해결방법 : var을 let으로 바꾸었더니 됐다 .... ^^
그래서 var과 let의 차이에 대해 정리해보기로 했다
var
- 함수레벨스코프
=> 자신으로부터 가장 가까운 function 스코프 안에서만 사용할 수 있습니다. 함수의 중괄호를 벗어나면 더 이상 그 변수를 사용할 수 없습니다. function 스코프 이외의 스코프에는 영향을 받지 않기 때문에, 같은 function이기만 하면 if나 for 안에서 선언된 변수를 밖에서 사용하는 것도 가능합니다.
let
- 블록레벨스코프
=> 자신으로부터 가장 가까운 블록 스코프 안에서만 사용할 수 있습니다. 블록 스코프는 function, if, for, while, switch 등 자바스크립트의 모든 스코프를 의미합니다. 별로 쓸 일은 없긴 하지만, 자바스크립트에서는 그냥 중괄호만 써도 블록 스코프를 형성할 수 있습니다.
아마 스코프 문제 때문이 아닌가 싶다.
각 콜백 함수가 실행될 시점에는 for 루프가 끝나서 marker가 배열의 마지막 명소의 marker로 변경된 이후이기 때문에 맨 마지막 명소의 정보만 marker에 등록된 것이다.
그래도 for문이 끝나고 콜백함수가 실행되는 시점은 같기때문에 var과 let의 차이는 뭐지 ? 라고 생각했는데 구글의 개발자님의 글을 보고 이해를 했다.
for문에서 let로 선언된 변수는 for문의 반복횟수 만큼의 클로저 영역을 생성한다고 한다.
그래서 나의 코드에서 이벤트등록 ,즉 show_time이 호출되는 시점에 전달되는 for문에서 선언된 let marker는 marker의 갯수만큼, 즉 그 시점별로 6개의 클로저가 생성된다.
show_time에 전달된 콜백은 자신이 show_time으로 호출될 당시의 for반복문의 클로저의 marker 에 접근하게 되는 것이다.
To Me
- 일희일비하지말기!
- 안되는 건 무조건 없다 난 다 해낼 수 있다
제가 이해한 것이 맞는 지는 잘 모르겠지만 틀렸으면 댓글부탁드립니다 ㅠㅍ
