[JQuery] setTimeout, setInterval 을 이용한 타이머

 

 

setTimeout, setInterval

타이머, 반복의 취소

 

- .text()는 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꿉니다. .html()과 비슷하지만 태그의 처리가 다릅니다.

- .text() -> 선택한 요소 안의 내용을 가져옵니다. 태그는 가져오지 않습니다. 예를 들어

var jb = $( 'h1' ).text();

는 h1 요소의 내용을 변수 jb에 저장합니다.

 

- .text( textString )

이전 내용을 지우고 새로운 내용을 넣습니다. 예를 들어

$( 'div' ).html( '<h1>Lorem</h1>' );

는 div 요소의 내용을 <h1>Lorem</h1>로 바꿉니다. HTML 태그는 텍스트로 처리합니다.

 

 

 

 

#1

 

console.clear();

 

var status = 'run';

 

var 안녕 = function(){

  

  if (status != 'run'){

    return false;

  }

 

var text = $('div').text();

  text = parseInt(text);

  //   문자 1을 숫자화

  text++;

  $('div').text(text); << 이전 내용 지우고 새로운 내용 넣기

 

  console.log(text);  

}

 

var intervalId = window.setInterval(안녕, 1000);

//  1000 = 1초

//  작업번호 셋팅

 

$('div').dblclick(function(){

//    반복 작업 취소, 어떤 작업을 취소할지 뒤에 써 주어야 함.(작업번호)

   window.clearInterval(intervalId);

})

 

 

// // 커스텀 코드 ------- 온오프 타이머

// $('div').click(function(){

//   if (status === 'run'){

//     status = 'paused';

//     console.log('paused')

//   }

  

//   else{

//     console.log('run');

//     status = 'run';

//   }  

// })

 

 

#2 -- setInterval을 사용하지 않음

 

console.clear();

 

var status = 'run';

 

var 안녕 = function(){

  

  if (status != 'run'){

    return false;

  }

 

var text = $('div').text();

  text = parseInt(text);

  //   문자 1을 숫자화

  text++;

  $('div').text(text);

 

  주기적_안녕();

//   함수를 예약시키는 함수 호출

  console.log(text);  

}

 

function 주기적_안녕(){

  window.setTimeout(안녕, 1000);

//   함수 예약

}

 

주기적_안녕();

 

 

 

 

 

 

 

 

 

 

///////////////////////////////// 재귀함수, CPU 연산속도만큼 함수를 불러오니 쓰지 마세요

var 안녕 = function(){

  

  if (status != 'run'){

    return false;

  }

 

var text = $('div').text();

  text = parseInt(text);

  //   문자 1을 숫자화

  text++;

  $('div').text(text);

 

  

  안녕();

}

///////////////////////////////////