setTimeout 실행순서에 대해..
본문
다시 도움을 요청합니다. 죄송합니다.
버튼을 누르면 메시지가 1-2초 동안 만 보였다 사라지게 만들고 싶습니다.
그래서 setTimeout 을 사용했는데, 문제는 메시지가 사라진 뒤에 아래쪽 코드가 실행되어야 하는데, 먼저 실행됩니다.
아래 코드를 보면 [2초후 사라집니다] 메시지가 사라진 다음에 alert()가 떠야 하는데, alert가 먼저 뜹니다.
setTimeout 이 끝난 뒤에 실행하려면 어떻게 하지요?
<button onclick="autoMsg('2초후 사라집니다.')">Fade</button>
<div id="msg" style="display:none; position:absolute; top:30%; left:50%"></div>
<script>
function autoMsg(txt) {
var msg = document.getElementById('msg');
msg.innerHTML = txt;
msg.style.setProperty('display', 'block');
setTimeout(function(){msg.style.setProperty('display','none');},2000);
//-- 글자가 사라진 후에 아래 코드가 실행되게??
alert('next code');
}
</script>
위 문제로 이틀 끙끙대다 아래와 같이 중간에 while 반복문으로 2초간 헛돌다 내려가게 해 보았습니다.
그런데 이렇게 하니까 2초 뒤에 alert()가 실행되기는 하는데, 또 이상하게 메시지가 아예 보이지가 않네요...ㅠ
function autoMsg(txt) {
var msg = document.getElementById('msg');
msg.innerHTML = txt;
msg.style.setProperty('display', 'block');
var seconds = Date.now() + 2000;
while (Date.now() < seconds) {};
msg.style.setProperty('display','none')
//-- 글자가 사라진 후에 아래 코드가 실행되게??
alert('next code');
}
도와 주세요.
되도록 가장 쉬운 방법으로 알려 주시면 감사하겠습니다.
답변 2
setTimeout(function(){msg.style.setProperty('display','none'); alert('next code'); },2000);
윽~ 이렇게 간단할 수가.....ㅠ
잘 됩니다..ㅎ
그런데 제가 요약해서 올리느라 질문이 잘못되었네요.
이 autoMsg() 함수가 여기저기서 쓸거라서 alert('next')가 이 함수 밖에 있어야 합니다..
즉,
autoMsg('2초후 사라집니다.');
alert('여기');
이렇게 해서 alert()가 2초후에 나와야 합니다..
이때는 어떻게 하죠?
function somefunc(){msg.style.setProperty('display','none'); alert('next code'); }
setTimeout( somefunc,2000);
아~ 이번 답변은 잘 이해가 안되네요...ㅠ
제가 이해를 못하는 것인지, 엑스엠엘님이 질문을 오해하시는 것인지.
혹시나 싶어 코드를 다시 올립니다.
button 안에 autoMsg() ; alert()를 적었습니다.
즉 (1)메시지가 2초간 보이고, (2)닫은 다음에 (3)alert()가 나와야 합니다.
그런데 alert()가 먼저 나옵니다..
<button onclick="autoMsg('2초후 사라집니다.'); alert('next')">Fade</button>
<div id="msg" style="display:none; position:absolute; top:30%; left:50%"></div>
<script>
function autoMsg(txt) {
var msg = document.getElementById('msg');
msg.innerHTML = txt;
msg.style.setProperty('display', 'block');
setTimeout(function(){msg.style.setProperty('display','none');},2000);
}
</script>
중요한건 autoMsg() 와 다음 명령(예:alert)과 섞고 싶지 않아요.
autoMsg()를 완전 별도의 함수로 이곳저곳에서 메시지가 필요할 때 쓰고 다음 명령은 무엇이 나올지 모르니까요.
제가 잘못 이해를 했네요.
function autoMsg(txt, alert_msg) {
...
alert( alert_msg);
}
이런 식으로 해야 될 거 같습니다.
아~ 그뜻이 아닌데....ㅋ
autoMsg() 다음에 꼭 alert() 가 온다는 뜻이 아니고, 어떤 함수가 올지 모르니 autoMsg()를 독립 시키고 싶었습니다.
예를들어
autoMsg('성공했습니다');
next();
또는
autoMsg('다시해 주세요');
previous();
또는
autoMsg('이동합니다');
goto();
이런식으로 사용하고 싶어서요..
처음에 알려 주신 방법으로 사용해도 되니 더 이상 귀찮게 안해 드릴께요..ㅎ
첫 방법은 자리마다 써야해서 좀 비효율적이긴 해도 잘 작동합니다.
다시 한 번 감사드립니다...^^
alert() 기본 함수라 변경이 불가 합니다.
그래서 autoMsg를 변경해야 하는 것이죠.
아직도 원하시는 내용을 이해 못하고 갑니다. ^^
https://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep
https://www.daleseo.com/js-sleep/
위 링크 참고해보세요.
function sleep (time) {
return new Promise((resolve) => setTimeout(resolve, time));
}
function autoMsg(txt) {
var msg = document.getElementById('msg');
msg.innerHTML = txt;
msg.style.setProperty('display', 'block');
setTimeout(function(){msg.style.setProperty('display','none');},2000);
//-- 글자가 사라진 후에 아래 코드가 실행되게??
sleep(2200).then(() => {
alert('next code')
});
}
덕분에 하나 배워가네요~^^
