JavaScript로 setInterval을 배웠습니다.

<전제>
・사용 PC;MacBook Air M1(구입일:2021년 4월)
· 텍스트 편집기 : VScode

ーーーーーーーーーーーーーーーーーーー
안녕하세요! 슛입니다. 오늘이 첫 포스트입니다.

최근 JavaScript의 공부를 시작했습니다만, HTML/CSS로부터 갑자기 어려워져, 굉장히 곤란하고 있었습니다.

드디어 자신의 말로 설명할 수 있게 되었으므로, 여기에 기록해 가고 싶습니다.

오늘의 테마는 setInterval (일정 시간마다 특정 처리가 반복된다).

화상과 같이, “0~5의 숫자를 1초씩 출력시킨다” 등이군요.



우선은 간단한 코드에서 써 보자.

그래서, 아래의 코드로 실현해 보았습니다.

qiita.js

let count = 0;
const countUp = function () {
    console.log(count++);
}

const intervalId = setInterval(() => {
    countUp();
    if (count > 5) {       
        clearInterval(intervalId);
    }
}, 1000);

영어가 많이 나란히 (당연히) 무엇 쓰고 있는지 갑자기 모른다! !
수식이 길면 머리 펑크처럼 보이지 않습니까? 웃음
(이 정도로 길다고 말하지 마라)

단지 이것뿐인데, 코드의 의미를 이해하고, 사람에게 설명할 수 있을 때까지 2시간이나 걸려 버렸습니다. 웃음

ーーーーーーーーーーーーーーー

① 우선 변수를 정의합니다.

qiita.js

let count = 0;

· 0 ~ X까지 숫자가 바뀌므로 변수를 정의하는 let을 사용합니다.

② 다음으로 0~X까지 표시하는 함수를 만듭니다.

qiita.js

const countUp = function () {
    console.log(count++);
}

・“count++” 로, 1씩 순서대로 출력됩니다.
・이것으로, countUp의 내용이 생겼습니다.

③ 인터벌의 기능 내용을 결정합니다.
먼저 그것을 나타내는 상수를 결정합니다.

qiita.js

const = intervalId 

④정수에 대입하는 함수를 만듭니다.

qiita.js

setInterval( 関数, 時間間隔(ミリ秒));

함수보다 먼저 시간 간격만 결정합니다.

qiita.js

setInterval( 関数, 1000);  // 1000ミリ秒=1秒 

이제 1초 간격으로 결정되었습니다.

⑤함수를 만든다.

qiita.js

 setInterval( () => {
    countUp();
}

이것만으로는,
이 간격 표시가 멈추지 않습니다.

영구적으로 숫자가 계속 출력됩니다.

그러므로 출력을 멈추는 조건이 필요합니다.
그것이 다음 if 문입니다.

⑥if문을 만든다.

qiita.js

 if (count > 5) {      
        clearInterval(intervalId);
    }

・5 이상이 되면, 출력을 멈춘다.
・출력을 멈추는 것이, clearInterval(인터벌을 클리어 한다).
・() 안에는 인수가 들어간다. 멈추고 싶은 함수명을 쓴다. 여기, intervalId.

⑦　④～⑥를 정리하면, 이렇게.

qiita.js

const intervalId = setInterval(() => {
    countUp();
    if (count > 5) {      
        clearInterval(intervalId);
    }
}, 1000);

이상입니다.

끝까지 읽어 주셔서 감사합니다!

단어의 선택이 이해하기 어렵다면, 꼭 코멘트를 부탁드립니다!
(거기는 함수명이나 없어 변수명이나 로가이!라든지 웃음)

슛