솔미는 성장중

[JS] 호출 스케줄링 ( 타이밍 함수 ) 본문

JavaScript/함수

[JS] 호출 스케줄링 ( 타이밍 함수 )

solming 2023. 7. 18. 17:02
728x90

기본 개념

setTimeout (실행할 내용, 시간)

  • '시간' 후에 1번 실행
  • 실행할 내용 적는 방법
    •  () => {내용}
    •  함수명

clearTimeout (대상)

  • 타이머를 해제한다.

setInterval (실행할 내용, 시간)

  •  '시간'마다 실행

clearInterval (대상)

  • setInterval로 실행하던 것 해제

예제

[index.html]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="module" defer src="./main.js"></script>
</head>
<body>
  <div class="container">
    <h1>Click Me</h1>
  </div>
</body>
</html>

 

[main.js]

const HelloWorld = () => {
  console.log('HelloWorld!')
}
const timeout = setInterval(HelloWorld,1000)
const h1El = document.querySelector('h1')
h1El.addEventListener('click',()=>{
  console.log('clear')
  clearInterval(timeout) //타이머 해제
})

html 파일에서 h1태그를 찾아서 해당 요소를 클릭하면 타이머 해제.

클릭하지 않으면 1초마다 HellowWorld! 출력

728x90

'JavaScript > 함수' 카테고리의 다른 글

[JS] This  (0) 2023.07.18
[JS] 함수 : 재귀  (0) 2023.07.18
[JS] 콜백 (callback) 함수 (예시 포함)  (0) 2023.07.18
[JS] 즉시 실행 함수 (IIFE)  (0) 2023.07.18
[JS] 함수 선언 : 화살표 함수  (0) 2023.07.18
'JavaScript/함수' Related Articles more