[code] // test1 console.log('A '); loopTime = Date.now() + 2000; while (Date.now() [/code] [code] //test2 document.getElementById("B1").innerHTML=" "; loopTime = Date.now(...

[code] //test2 document.getElementById("B1").innerHTML=" "; //loopTime = Date.now() + 2000; while (Date.now() "; //loopTime = Date.now() + 2000; while (Date.now() < loopTime) {} // 딜레이 setTimeout(function(){}, 2000); // 2초간 딜레이 document.getElementById("B3"...

이전 목록 다음

미채택 완료

자바스크립트에서 딜레이를 주고 싶습니다.

타버린나무

프로필 보기 이 회원 글보기 이 회원의 댓글보기

3년 전 3,891

Copy

<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>

Copy

<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초 있다가 한꺼번에 그림이 나와버리네요...

하나씩 시간을 줘가며 그림을 보여주고 싶은데 어떻게 해야할까요

그누보드5 자바스크립트

답변 6개 / 댓글 6개

타버린나무

프로필 보기 이 회원 글보기 이 회원의 댓글보기

3년 전

https://www.delftstack.com/ko/howto/javascript/javascript-wait-for-x-seconds/

여기서 참고해서 해결했습니다.

답변주신분들 너무 감사합니다.

eaglehorn

프로필 보기 이 회원 글보기 이 회원의 댓글보기

3년 전

본문대로 하면 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);

이렇게 하세요

답변에 대한 댓글 3개

타버린나무

프로필 보기 이 회원 글보기 이 회원의 댓글보기

3년 전

알려주신건 처음부터 시간을 정해놓는거라 적시적소에서 필요한 딜레이를 넣으려니 어려워서 질문 드린거였습니다.
답변 너무 감사합니다.

eaglehorn

프로필 보기 이 회원 글보기 이 회원의 댓글보기

3년 전

적시 적소에 필요한 딜레이를 넣는 다는 게 도대체 무슨 개념인지 무슨 차이가 있는 건지 모르겠네요
아예 스크립트 실행 자체를 지연 시킨다는 건지..

타버린나무

프로필 보기 이 회원 글보기 이 회원의 댓글보기

3년 전

예를 들어서

a 보여준 후에 5초 있다 b보여줌
b가 표시되고 10초후 c 보여줌
c 표기후 5초있다 확인버튼 표시
버튼을 누르길 기다렸다가
버튼을 클릭하면 f 보여주고 10초 대기

예를 들어 봤지만.. 위같은 경우 setTimeout()으로는 구현이 잘 안되서 질문 드린거에요.
제가 너무 초보라 위처럼 하는 이유자체가 개념이 잘 못 된것일수 있는데.. 그걸 모르니 이런 질문을 드리게 된..
검색해보니 자바스크립트는 php처럼 순차적 실행이 아니라고 하더군요. 동기 비동기 이런게 있다는걸 이번에 알게됨..

균이

프로필 보기 이 회원 글보기 이 회원의 댓글보기

3년 전

간단히 다음처럼 하면 됩니다

Copy

<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>

답변에 대한 댓글 1개

타버린나무

프로필 보기 이 회원 글보기 이 회원의 댓글보기

3년 전

이렇게 하면 미리 시간을 정해놓는거라 중간에 시간을 딱 못 맞출 경우엔 원하는 동작을 할 수 없어서요... 필요할때 딜레이를 주고 싶어서 질문 들린거에요.. 답변 감사합니다.

복스리

프로필 보기 이 회원 글보기 이 회원의 댓글보기

3년 전

Copy

<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>

위에소스 참고 하시면 될꺼 같습니다.