setInterval
contents div태그를 가져오고 카운트변수를 생성해줬다.
setInterval함수에 익명함수로 카운트를 증가시켜주며 div태그안에 증가된 값을 표시해준다.
뒤의 ,1000은 함수호출의 간격이다. 1000이 1초 100이 0.1초다.
일반함수로는 이렇게 생성이 가능하다.
매 초마다 박스안의 숫자가 증가한다.
setInterval함수는 함수를 지정된 간격으로 계속해서 호출한다.
clearInterval
위의 함수에서 timerID변수를 생성하고 setInterval을 지정해준다.
stop버튼을 생성하고 버튼 클릭시 알림창과 clearInterval 이벤트를 넣어준다.
아까와 같이 숫자가 증가하다 버튼을 누르면 알림창과 함께 숫자가 멈추게 된다.
clearInterval은 setInterval로 인한 함수반복호출을 멈춰준다.
setTimeout
이전과 같이 contents div를 가져온 상태에서 setTimeout에 익명함수를 넣어준다.
10초뒤 div박스안에 해당 문장이 나타나게 된다.
일반함수 방식으로 사용시이다.
10초뒤 아무것도 없던 박스에 문장이 나타난다.
setInterval은 지정된 간격만큼 지속호출이라면
setTimeout함수는 한번 호출하고 끝이다.
'Front-end > JavaScript' 카테고리의 다른 글
| [자바스크립트] js문자열 길이, 해당인덱스문자출력, 해당문자위치출력, 문자열 잘라내기, string문자열편집함수, length, charAt, indexOf, slice, substr (0) | 2022.05.10 |
|---|---|
| [자바스크립트] js최소, 최대, 올림, 버림 (Math.min, max, ceil, floor) (0) | 2022.05.09 |
| [자바스크립트] 클로저 함수 (0) | 2022.05.08 |
| [자바스크립트] js 콜백함수 (0) | 2022.05.08 |
| [자바스크립트] 익명함수, 일반함수, 객체방식함수, 익명함수의 확장 (0) | 2022.05.05 |