Promise, async await로 감싼 이벤트 관련해서 질문 있습니다.

[이수보]

var btn = document.querySelector('#asyncTest');

async function clickBtn() {
 var prom = new Promise((resolve, reject) => {
   btn.addEventListener('click', function() {
       console.log('얘는 계속 출력 가능');
       resolve('클릭했어용가리');
 })
  })
  
  var result = await prom;
  console.log(result);
}

clickBtn();
// =============== other case ===================

var btn2 = document.querySelector('#asyncTest2');

var prom2 = new Promise((resolve, reject) => {
  btn2.addEventListener('click', function() {
    resolve('클릭이요');
  })
}) 

async function clickBtn2() {

 var result2 = await prom2;
  console.log(result2);
}

  btn2.addEventListener('click', clickBtn2);

async/ awiat 강좌 마지막 연습문제에서

다음과 같이 위의 clickBtn1 과 clickBtn2 라는 함수를 2개 작성했습니다.

clickBtn1 의 경우 Promise가 실행되면서 이벤트 달리고 클릭 시 resolve가 잘 실행되어 result가 출력됩니다.
하지만 계속해서 클릭이벤트를 발생시켜 resolve해줘도 이미 함수는 한  번 실행이 끝났기 때문에 이벤트가 실행되어도 resolve 처리가 되지 않는 것 같습니다.

위 와 같은 상황을 피하기 위해 addEvent를 두 개 설정하여 clickBtn2와 같은 로직을 짰는데 암만 생각해도 저런 이벤트를 두개나 달아버리는 
비효율적인 코드는 뭔가 아닌거 같네요

clickBtn1 과 같은 상황을 해결하는 해결책이나, 더 효율적인 방법을  알 수 있을까요??

[codingapple]

Promise는 한번 resolve되면 끝이라
계속 resolve시키고 싶으면 계속 new Promise 새로 만들어주거나 그러는 수 밖에 없습니다

[글쓴이]

글