🧡콜백
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.message-ball {
font-size: 20px;
line-height: 200px;
text-align: center;
}
.circle {
transition-property: width, height, margin-left, margin-top;
transition-duration: 2s;
position: fixed;
transform: translateX(-50%) translateY(-50%);
background-color: red;
border-radius: 50%;
}
</style>
</head>
<body>
<button onclick="circle()">showCircle(150, 150, 100)</button>
<script>
function circle(){
//원 그리는 함수 호출
showCircle(150, 150, 100, div => {
//콜백함수로 쓰일 함수.
div.classList.add('message-ball');
div.append("안녕하세요!");
});}
function showCircle(cx, cy, radius,callback) {
//1. 원 엘레먼트(div)를 만든다.
let div = document.createElement('div');
div.style.width = 0;
div.style.height = 0;
div.style.left = cx + 'px';
div.style.top = cy + 'px';
div.className = 'circle';
//2. DOM에 삽입
document.body.append(div);
//3.비동기 함수
setTimeout(() => {
//3-1. 반지름을 곱해서 원을 키움
div.style.width = radius * 2 + 'px';
div.style.height = radius * 2 + 'px';
//3-2. Div에 걸린 이벤트: transition 이 완료되면 발생
div.addEventListener('transitionend', function handler() {
//3-2-1. div에 걸린 이벤트 삭제: 누를 때마다 이벤트가 생성되는 것을 방지
div.removeEventListener('transitionend', handler);
callback(div);
});
}, 0);
}
</script>
</body>
</html>
공부중