[JS-보충] 22-09-28 setTimeout · setInterval · clearInterval

자바스크립트 javascript 

setTimeout 과 setInterval, clearInterval 예제 및 문제

---

특정시간마다 실행되는 함수를 생성하는것

setTimeout    특정시간에 1번실행
setInterval   특정시간마다 실행

setTimeout(function(){
  document.write('setTimeout' + new Date() + '<br>');
}, 2000);
//2초후에 function부분이 실행

var myFunction=function(){
  document.write('setTimeout'+new Date() + '<br>');
}
setTimeout(myFunction, 5000);
//5초후에 실행

var count =0;
setInterval(function(){
  count++;
  document.write(count+'<br>');
}, 2000);
2초마다 count값 증가

var myFunction = function(){
  var count = 0;
  count++;
  document.write( count + ":" + new Date()+ '<br>');
} 
setInterval(myFunction, 2000);
//2초마다 시간 찍힘 지역변수라 count값 1로 유지

 

setInterval은 원할때 제어할수있도록 생성할때 식별자를 리턴한다.
이 식별자와 clearInterval 메소드를 이용해 동작중인 타이머를 멈추게 할수있다

 

var count = 0;
var myFunction = function(){

  count++;
  document.write( count + ":" + new Date()+ '<br>');
} 

var aTimer = setInterval(myFunction,2000);
var bTimer = setInterval(myFunction,2000);
//2초에 두개씩 출력된다. count값은 증가

var count = 0;
var myFunction = function(){

  count++;
  document.write( count + ":" + new Date()+ '<br>');
} 

var aTimer = setInterval(myFunction,2000);
var bTimer = setInterval(myFunction,2000);

//clearInterval(aTimer);
//bTimer가 죽어 출력되지않게된다.

 

 응용 1번 문제 
버튼 4개를 만들고
버튼1를 누르면 A값 2초마다 시간출력
버튼2를 누르면 B값 2초마다 시간출력
버튼3을 누르면 A값 출력종료
버튼4를 누르면 B값 출력종료
div 콘솔에 출력해보자.

  <button id="btn1">A시계 시작</button>
  <button id="btn2">B시계 시작</button>
  <button id="btn3">A시계 멈춤</button>
  <button id="btn4">B시계 멈춤</button>
     <h1>A시계</h1>
   <div id="console1"></div>  
     <h1>B시계</h1>
   <div id="console2"></div>

var timerA;
var timerB;

var timerAFunction=function(){
   document.getElementById('console1').innerHTML='timerA' +new Date();
}
var timerBFunction=function(){
   document.getElementById('console2').innerHTML='timerB' +new Date();
}

window.onload = function(){
    document.getElementById("btn1").onclick= function(){
      timerA = setInterval(timerAFunction, 2000);
    }
    document.getElementById("btn2").onclick= function(){
      timerB = setInterval(timerBFunction, 2000);
    }
    document.getElementById("btn3").onclick= function(){
      clearInterval(timerA);
    }
    document.getElementById("btn4").onclick= function(){
      clearInterval(timerB);
    }
}

 

 

 응용 2번 문제 
a, b, c를 타이머로 랜덤하게 숫자를 더해서 100이 넘는 순서대로 출력하시오
a = a+parseInt(Math.random()*10);
Math.random() >= 0
Math.random() < 1
abc변수를 선언해서 타이머로 각각 랜덤한 수를 더해서 먼저 100을 도달하는 순서대로 출력하시오

  var a=0,b=0,c=0;
    var endStr='';//게임종료후 출력할 문자열
    var count=1;  //등수 기록


    var intervalIdA=setInterval(function(){
        a=a+parseInt(Math.random()*10);
        if(a>=100){
            a=100;
            clearInterval(intervalIdA);
            endStr=endStr+`A는 ${count++}등<br>`;
        }        
        document.write("a:"+a+"<br>")
    },500)

    var intervalIdB=setInterval(function(){
        b=b+parseInt(Math.random()*10);
        if(b>=100){
            b=100;
            clearInterval(intervalIdB);
            endStr=endStr+`B는 ${count++}등<br>`;
        }
        document.write("b:"+b+"<br>")
    },500)

    var intervalIdC=setInterval(function(){
        c=c+parseInt(Math.random()*10);
        if(c>=100){
            c=100;
            clearInterval(intervalIdC);
            endStr=endStr+`c는 ${count++}등<br>`;
        }        
        document.write("c:"+c+"<br>")
    },500)

    var intervalIdIsEnd=setInterval(function(){
        if(count==4){
            clearInterval(intervalIdIsEnd);
            document.write("<br>게임 종료:<br>"+endStr);
        } 
    },500)


    //document.write("시작")

 

 응용 3번 문제 
시작버튼을 누르면 1초에 10씩 늘어나서 100퍼센트를 채우는 프로그래스바 만들기.

<progress id="bar" value="0" max="100"></progress>
<input type="button" value="시작" onclick="progress()" />

function progress(){

  var bar = document.getElementById("bar");
  var i = 0;
  
  var timer = setInterval(function(){
    i += 10;
    bar.value=i;
    if(i == 100){
      clearInterval(timer);
    }
  },1000);
  
}