[모던 자바스크립트] 비동기 퀴즈 분석

soyeon·2022년 7월 25일
0

TIL

목록 보기
20/31

🧡콜백

<!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>
profile
공부중

0개의 댓글