jQuery 기본, 문서의 동작 확인하기 setTimeout , setInterval

http://jquery.com/

웹페이지가 준비되면 실행되는 제이쿼리 기본 문구이다.

$(document).ready(function(){

//TODO:

});

셑인터발 또는 셑타임아웃으로 간단하게 작동을 확인해보자.

$(document).ready(function(){

   start(); // 문서가 준비되면 start 함수를 실행한다.

   function start(){
      setTimeout(start,1000); // 1초 후 start를 재귀호출한다.
      console.log('hello~'); // 크롬 브라우저라면 F12를 눌러 확인할 수 있다.
      alert('hello~');
   }
});

이렇게하면, 계속 hello~ 를 한다.
어느정도 hello~ 를 하고나면 그만두게 하자.

hello~ 대신 시간을 찍어보자.

$(document).ready(function(){

 var watch; // 왓치라는 변수를 하나 만든다.
 
 function start(){
    watch = setTimeout(start,1000); //왓치변수에 재귀호출하는 행위를 넣는다.
    timer(); //타이머 함수를 불러온다.
 }

 function timer(){
  var d = new Date(); // 이번엔 시간을 찍어보자.
  var t = d.toLocaleTimeString(); // 우리말에 맞게 시간만 뽑아낸다.
  console.log(t);
 }
 
 function stop(){ // stop 이라는 함수는 6초후 
  setTimeout(function() { // 이름없는 함수를 호출하는 동작을 한다.
   clearTimeout(watch); // 재귀호출하는 watch 변수를 지운다.
  }, 6000);
 }

 start(); // start 함수 시작. 6초 동안 시간을 찍는다.
 stop(); // stop 함수 시작. 6초 후 시간 찍는것을 멈춘다.

});

setInterval 함수 역시 setTimeout 과 사용방법은 똑같다.

차이점은 setTimeout 은 한번만 실행되고 사라지기 때문에, 재귀함수로 계속 호출해줘야하지만 , setInterval 재귀함수 없이 밀리세컨드 간격으로 반복해서 실행하는것이 가능하다.

잘 이해가 안간다면 아래 소스와 위 소스 코드를 비교해보자.

$(document).ready(function(){

 var watch;
 
 function start(){
    watch = setInterval(timer,1000);
 }

 function timer(){
  var d = new Date();
  var t = d.toLocaleTimeString();
  console.log(t);
 }
 
 function stop(){
  setTimeout(function() {
   clearInterval(watch); // interval 함수 타이머 종료
  }, 6000);
 }
 start();
 stop();
});

버튼으로 만들면, 타이머를 만들 수 도 있다.