[javascript] await 으로 element 가져오기, Promise.race

element 가 로드 되지않았는데 가져오다보니 undefined 오류가 나서 await 을 추가해서 DOM 요소가 나올때까지 기다렸다 일정시간이 지나면 null 로 내뱉는 함수를 만들었다.
사실 내가 만든건 아님 채찍 형님이 만들었는데 유용하게 앞으로도 쓰일것 같아서 메모로 남긴다.

const element = await waitForElement("select_"+seq);

async function waitForElement(selector, timeout = 3000) {
    const start = Date.now();

    while (Date.now() - start < timeout) {        
    	# querySelector 로 할지 getBy 로할지는 본인 선택
        const element = document.getElementById(selector)        
        if (element) return element;
        await new Promise(resolve => setTimeout(resolve, 300));
    }
    return null;
}

기본 timeout 3초로 잡고, 3초되기까지 0.3 초 동안 내내 while 문을 돌면서 element 가 로드 되었는지 안되었는지 체크 후 값이 있으면 뱉어주고 3초 지나면 null

이렇게 쓰다보니 while 문 보다 setInterval 로 처리하는게 낫다고해서 변경
그리고 Promise.race 사용

async function waitForElement(selector, timeout = 5000, interval = 300) {
  const checkForElement = () => new Promise(resolve => {    
    const intervalId = setInterval(() => {
      const element = document.getElementById(selector);
      if (element) {
        console.log(element)
        clearInterval(intervalId);
        resolve(element);
      }
    }, interval);
  });

  const timeoutPromise = new Promise(resolve => {    
    setTimeout(() => resolve(null), timeout);
  });

  return Promise.race([checkForElement(), timeoutPromise]);
}

그나저나 리액트 해야되는데 .. 요즘 자바 프로젝트 한다고 다 까먹겠네 ㅠ