코딩을 너무 심각할정도로 진지하게 어렵게만 받아들여서 공부를 처음 시작할때의 초심을 잃어가고 있다. 코딩에 대한 적성을 고민할정도로 말이다.
그에 대한 극약처방으로
아무 쓸모없고 병맛스러운 것으로 쉬운 것부터 아무생각없이 코딩하는 것으로 극복해보고자 한다.
그래서 바로 setInterval 함수와 clearInterval 함수를 통해서
'애옹테스트 시작'버튼을 누르면 2초마다 '애옹!'을 외치도록 하고
'애옹테스트 끝' 버튼을 누르면 '아르르르르'를 외치며
2초마다 외치는 '애옹'을 그만나오도록 하는 걸 구상했다.
'애옹테스트 시작'버튼은 문제없었다.
2초마다 '애옹'을 잘 외쳐주고 있다.
이제 '애옹테스트 끝'버튼을 눌렀다.
첫번째 '아르르르르'가 나오면서 애옹은 멈추는 듯...했으나..
계속 멈추지 않는다.
이렇게 첫 시도부터 애옹버그가 발견된다.
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
그렇다면 여기서 추측,
clearInterval함수로는 완전히 stop이 안된다는 추측이 들었다.
코드를 다시 보니 일단 27번줄 .innerText에서 +를 빼먹었다.
그래서 '아르르르'는 한번밖에 안나왔다.
'아르르르르'는 이제 누를때마다 잘나온다.
그러나 clear한번 누르고 다시 한번 2초마다 나오고 있다.
자 어떻게 하면 완벽히 stop을 할 수 있을까?
https://aljjabaegi.tistory.com/423
구글링해보니 위 블로그에서 나와 같은 고민을 가지고 해결한 사례가 있었다.
setInterval함수가 이전에 대표적인 비동기함수로 들었는데,
그래서 큐에 이미 '애옹'함수가 등록되어있어서 계속 실행되는 것이 원인으로 판단한다.
위 블로거는 그래서 flag를 사용하도록 권장한다.
React에서 배웠던 state랑 비슷해보인다.
그럼 위 블로그를 참고삼아 flag를 이용해보자!
우선 setInterval 함수를 aeongTimer 변수 안에 넣자 clearInterval이 원활히 진행됬다.
첨에 clearInerval안에 nyangiren함수를 넣었는데, 해당되는 setInterval함수에 정확한 변수를 할당해줘야 반영이 되는 것 같다.
stop함수에서 flag변하는 위치는 clearInterval함수 실행 후 변화해야한다.
flag를 그 앞쪽에 둬서 반영이 안되었다.
console을 찍으니 확실히 beforeStop과 afterStop의 boolean값이 달라졌다.
아래 결과화면!
https://developer.mozilla.org/en-US/docs/Web/API/setInterval
