JavaScript(17)

박찬영·2024년 1월 18일

JavaScript

목록 보기

17/19

1. setTimeout

• 정해진 시간이 지나고 나면 주어진 함수를 실행 해주는 타이머 메소드


• 사용 방법 : setTimeout(실행할_함수, ms_단위의_시간)

  ex) setTimeout(function(){
		 console.log("재미있다")
      }, 1000)

2. setInterval

• 일정한 시간 간격에 따라 함수를 반복 실행할 수 있도록 해주는 타이머 메소드


• 사용 방법 : setInterval(반복_실행할_함수, ms_단위의_시간)

  ex) setInterval(function(){
		  console.log("안녕하세요")
      }, 500)

3. clearInterval

• setInterval 메소드가 호출되어 반복 실행할 함수 타이머를 등록하면, 타이머는 0이 아닌 
  숫자를 반환한다. 

• 숫자는 타이머의 ID를 의미하며, 이를 clearInterval 메소드에 전달하면 해당 타이머의 반복 
  실행이 취소된다.

  
  ex) clearInterval(timer)

4. 실습

1) html 코드

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE-edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>자바스크립트 실습</title>
    </head>
    <body>
        <button>STOP</button>
        <script src="script.js"></script>
    </body>
</html>

2) js 코드

setTimeout(function(){
    console.log(1234)
}, 2000)

let interId
interId = setInterval(function(){
    console.log("hello")
},1000)
console.log(interId)

const button = document.querySelector("button")
button.addEventListener('click', function(){
    clearInterval(interId)
})