alert 함수 순서조정

혼자 공부하다보니 아래와 같은 상황에 부딪히게 되었다.

 

 

 

 

 

위 상황처럼 로그인버튼을 눌렀을 때 파란색 테투리가 나오게 하고 싶었는데 alert버튼이 먼저 눌러졌다 코드로보면

 

loginbtn.onclick = () => {
  loginbtn.style.border = "2px solid blue";  
  alert(`${id.value}님 어서오세요`);
};

위와같이 분명 alert를 나중에 적용되게 했는데 그렇지 못한것이다.

 

 

공부를 좀 해보니 alert는 현재 진행중인 모든상태를 멈추고 alert알람을 울리게 된다. 분명 순서상으로는 로그인 버튼의 가장자리를 파랗게 하는게 먼저진행되지만 그 파란색으로 바꾸는 찰나의 시간에 alert가 걸리기 때문에 alert가 먼저 진행되는것처럼 보이게 된다.

 

이를 해결하기위해선 setTimeout()을 사용하면 된다.

 

loginbtn.onclick = () => {
  loginbtn.style.border = "2px solid blue";
  setTimeout(() => {
    alert(`${id.value}님 어서오세요`);
  }, 0);
};

 

다음처럼 setTimeout을 쓰고 delay시간을 0으로두면 delay걸리는 실 소요시간은 없지만 css변화하는 시간 이후에 alert함수가 동작하게 된다!