< 섹션 4 >
9. clearInterval
setInterval() = 함수
대부분의 함수는 return 을 해준다.
함수를 실행만하고 return 을 안 해준 상태. (리턴 값 받지 않음)
리턴값을 받기 위해서 변수에 담아봄
intervalId 라는 변수
tagetDateInput 변수와 똑같은 형식인 것임.
const targetDateInput = dateForMaker();
targetDateInput => 리턴 데이터를 여기에 담아준 것
그리고 targetDate = new Date( targetDateInput ) 이렇게 사용해줬었다.
intervalId 라는 변수에 뭐가 담겨져 있을 지
console.log 를 통해 확인해보기.
값 넣어주고 버튼 눌러줌
=> 숫자 1 나옴
=> 버튼 한 번 더 눌러주면 숫자 2 출력
누를 수록 숫자가 증가돼서 출력 됨. ( 1, 2, 3...)
setInterval 이라는 함수의 반환값은 interval의 id.
반복중인 코드의 아이디 값.
1초마다 함수가 반복실행 되는데, interval 마다 고유한 id 값을 갖게 됨
clearInterval() 함수 사용
소괄호 안에 각 인터벌의 고유한 아이디값을 넣어줌.
( ex: 1,2,3 )
3 까지 clearInterval 을 찍어주면
카운트 다운이 중지된 걸 볼 수 있다
(반복이 중지된 것)
clearInterval (1)
clearInterval (2) 까지 반복이 중지되지 않았던 이유
= 총 3개의 인터벌이 실행되고 있었기 때문에
즉, 버튼 3번 누르고 있었으니까
1 이라는 인터벌 한 개
2라는 아이디 값을 가진 인터벌 한 개
3 까지
이렇게 3개가 존재하고 있었기 때문에,
3개가 동시에 인터벌로서 존재하고 있었던 것
=> 3개의 아이디를 모두 제거해주니까 반복이 종료.
clearInterval 사용해서 반복되는 Interval 삭제해주기.
setClearInterval 함수 만들어준다.
갖고있는 intervalId를 활용해서 setClearInterval 함수에서 삭제해줄 예정
버튼하나를 html 에서 더 생성해준다.
onclick 생성 - 버튼이 눌렸을 때 어떤 함수 실행해줄 건지 지정해준다.
버튼 두 개 서로 공유할 수 있도록,
id 를 class로 바꿔준다.
인터벌 아이디가 여러개 생성될텐데 관리하는 방법.
const 사용해서 배열하나 생성.
intervalIdArr 배열
함수가 실행될 때마다 새로운 인터벌이 실행되니까 interval id 도 계속해서 생성됨.
intervalIdArr 배열을 갖고와서
배열에 특정 데이터 넣어주는 메소드 사용.
= push
주어진 배열의 가장 뒷 부분에
push 소괄호 안에 들어가는 데이터를 입력해주는 것.
소괄호 안에 intervalId 넣어준다.
starter 함수가 시작될 때 마다,
intervalId 가 새로 생성이 될 것이고,
intervalIdArr 배열에 해당 intervalId 값을 넣어주게 된다.
intervalIdArr 배열의 길이만큼 반복해주는 for 문을 생성
아까 푸시로 넣어준 intervalIdArr 배열 확인해보기.
카운트 다운 시작 버튼 눌러보면
인터벌 아이디 [1] 이렇게 하나 들어간 걸 확인할 수 있다.
누를 수록 더 생성되는 걸 확인 가능.
근데 하나씩 밖에 존재하지 않음.
타이머 초기화 버튼을 눌렀을 경우
intervalIdArr 이 정의되지 않았다고 나온다.
중괄호 안에서 선언된 변수(ex: intervalIdArr )는
밖으로 나가지 못함.
setClearInterval 로 활용 불가.
중괄호 밖에서 선언된 변수는 중괄호 안에서 참조 가능
intervalIdArr 이제 안에서 가져올 수 있음.
참조도 가능.
두 번 누르니까
아까와는 다르게 인터벌 아이디가 제대로 담김
함수 실행할 때마다 intervalIdArr 라는 빈배열을 생성해주고 있었음.
함수가 실행되면 빈 배열이 만들어지는 것.
그리고 빈 배열에 푸시해줌. 그러면 인터벌 아이디가 하나 들어가게 됨.
한 번 더 버튼 누르게되면 함수 다시 실행.
그 때도 intervalIdArr 변수는 똑같이 빈배열.
그리고 그 빈 배열에다가 새로운 아이디 푸시.
그리고 그 빈 배열에다가 새로운 아이디 넣어주고,
빈 배열에다가 하나 넣어준거니 값은 하나 밖에 없음.
이걸 반복
푸시를 통해서 각각의 아이디 값이 들어가진 모습
이거 복사한 다음
이 쪽에 넣어준다.
타이머에 시간 입력해주고
카운트 다운 시작한 다음, 타이머 초기화 눌러주면
메시지 자체가 사라짐.
이 부분이 컨테이너
이 container 의 display = "none" 값으로 사라지게 한다.
messageContainer 부분
D-day를 입력해주세요 라고 나오도록 했지만 나오지 않았음.
= 다시 나타나게 하는 코드를 넣어주지 않았기 때문
= flex 를 넣어준다.
= 화면에 다시 나타나게 해줌
타이머 초기화 누르면 메시지도 잘 입력되고
타이머도 초기화되는거 확인 가능.
반복 실행 중 메시지 계속 출력되는 것 확인됨.
타이머 초기화 눌러주면 반복실행 중 메시지 더 이상 출력되면 안됨.
눌러주면 더 이상 출력이 안되는 걸 확인 ( = 인터벌 자체가 삭제된 것 )
setClearInterval 함수 추가 = 이 부분 정확히 이해는 안됐음 (20:20)
이렇게 두 군데 추가해준다.
불필요한 함수 반복 해제.
setInterval
clearInterval 헷갈림.
여기에서 새로운 카운트 다운 생성해주고 싶을 때,
바로 새로운 날짜 입력하면
이상하게 변한다.
이상하게 동작하는 데이터
수정해줘야함.
+
새로 고침하 때 마다
타이머 초기화 되는 거 수정해야함
'> 프로그래밍 언어 > Javascript' 카테고리의 다른 글
| 훈훈한 Javascript (17) (0) | 2023.09.16 |
|---|---|
| 훈훈한 Javascript (16) (2) | 2023.09.16 |
| 훈훈한 Javascript (14) (0) | 2023.09.12 |
| 훈훈한 Javascript (13) (0) | 2023.09.04 |
| 훈훈한 Javascript (12) (0) | 2023.09.04 |
