자바스크립트에서 딜레이를 주고 싶습니다.
본문
<script>
// test1
console.log('A ');
loopTime = Date.now() + 2000; while (Date.now() < loopTime) {} // 딜레이
console.log('B ');
loopTime = Date.now() + 2000; while (Date.now() < loopTime) {} // 딜레이
console.log('C ');
loopTime = Date.now() + 2000; while (Date.now() < loopTime) {} // 딜레이
</script>
<script>
//test2
document.getElementById("B1").innerHTML="<img src='img/"+B1+".png'>";
loopTime = Date.now() + 2000; while (Date.now() < loopTime) {} // 딜레이
document.getElementById("B2").innerHTML="<img src='img/"+B2+".png'>";
loopTime = Date.now() + 2000; while (Date.now() < loopTime) {} // 딜레이
document.getElementById("B3").innerHTML="<img src='img/"+B3+".png'>";
loopTime = Date.now() + 2000; while (Date.now() < loopTime) {} // 딜레이
</script>
위 test1 처럼 하면 2초마다 A B C 동작이 잘됩니다.
그래서 실제 적용하려고 test2 처럼 해보니
6초 있다가 한꺼번에 그림이 나와버리네요...
하나씩 시간을 줘가며 그림을 보여주고 싶은데 어떻게 해야할까요
답변 6
javascript settimeout 를 한번 검색해보시면 될거 같습니다.
저도 이글 검색해보고 본문의 루프를 넣어본건데 본문에 썻듯이 원하는것 처럼 동작하진 않더군요
<script>
<script>
//test2
document.getElementById("B1").innerHTML="<img src='img/"+B1+".png'>";
//loopTime = Date.now() + 2000; while (Date.now() < loopTime) {} // 딜레이
setTimeout(function(){}, 2000); // 2초간 딜레이
document.getElementById("B2").innerHTML="<img src='img/"+B2+".png'>";
//loopTime = Date.now() + 2000; while (Date.now() < loopTime) {} // 딜레이
setTimeout(function(){}, 2000); // 2초간 딜레이
document.getElementById("B3").innerHTML="<img src='img/"+B3+".png'>";
//loopTime = Date.now() + 2000; while (Date.now() < loopTime) {} // 딜레이
setTimeout(function(){}, 2000); // 2초간 딜레이
</script>
위에소스 참고 하시면 될꺼 같습니다.
답변 감사합니다. 위 소스도 딜레이 없이 한번에 다 출력 되는군요..
간단히 다음처럼 하면 됩니다
<style>
#B1, #B2, #B3{display:none;}
</style>
<div id='B1'><img src=~~~~></div>
<div id='B2'><img src=~~~~></div>
<div id='B3'><img src=~~~~></div>
<script>
$(function(){
setTimeout(function(){ $("#B1").show(); }, 2000);
setTimeout(function(){ $("#B2").show(); }, 4000);
setTimeout(function(){ $("#B3").show(); }, 6000);
});
</script>
이렇게 하면 미리 시간을 정해놓는거라 중간에 시간을 딱 못 맞출 경우엔 원하는 동작을 할 수 없어서요... 필요할때 딜레이를 주고 싶어서 질문 들린거에요.. 답변 감사합니다.
본문대로 하면 2초마다 innerHTML에 내용이 들어가는건 맞는데
2초동안 계속 반복문 돌리다가 끝나면 다시 2초동안 반복문 돌리고.. 하는 식이라
내용은 2초마다 들어가지만 총 6초짜리 반복문이 다 끝나고나서 화면에 한번에 표시되는거라 그러는거구요
document.getElementById("B1").innerHTML="<img src='img/"+B1+".png'>";
setTimeout(function(){
document.getElementById("B2").innerHTML="<img src='img/"+B2+".png'>";
}, 2000);
setTimeout(function(){
document.getElementById("B3").innerHTML="<img src='img/"+B3+".png'>";
}, 4000);
이렇게 하세요
알려주신건 처음부터 시간을 정해놓는거라 적시적소에서 필요한 딜레이를 넣으려니 어려워서 질문 드린거였습니다.
답변 너무 감사합니다.
적시 적소에 필요한 딜레이를 넣는 다는 게 도대체 무슨 개념인지 무슨 차이가 있는 건지 모르겠네요
아예 스크립트 실행 자체를 지연 시킨다는 건지..
예를 들어서
a 보여준 후에 5초 있다 b보여줌
b가 표시되고 10초후 c 보여줌
c 표기후 5초있다 확인버튼 표시
버튼을 누르길 기다렸다가
버튼을 클릭하면 f 보여주고 10초 대기
예를 들어 봤지만.. 위같은 경우 setTimeout()으로는 구현이 잘 안되서 질문 드린거에요.
제가 너무 초보라 위처럼 하는 이유자체가 개념이 잘 못 된것일수 있는데.. 그걸 모르니 이런 질문을 드리게 된..
검색해보니 자바스크립트는 php처럼 순차적 실행이 아니라고 하더군요. 동기 비동기 이런게 있다는걸 이번에 알게됨..
https://www.delftstack.com/ko/howto/javascript/javascript-wait-for-x-seconds/
여기서 참고해서 해결했습니다.
답변주신분들 너무 감사합니다.