JS) 숫자 카운트 setInterval(), setTimeout()

웹페이지 접속 할 때 숫자 카운팅 되면서 움직이는..

그런것들을 만들고 싶었다면?

 

// HTML

<span class="count">0</span>

 

 

// JS

// 숫자 카운트
const counter = ($counter, max) => {
    let now = max;

    const handle = setInterval(() => {
        $counter.innerHTML = Math.ceil(max - now);

        // 목표수치에 도달하면 정지
        if (now < 1) {
            clearInterval(handle);
        }

        // 증가되는 값이 계속하여 작아짐
        const step = now / 10;

        // 값을 적용시키면서 다음 차례에 영향을 끼침
        now -= step;
    }, 50);
}

window.onload = () => {
    // 카운트를 적용시킬 요소
    const $counter = document.querySelector(".count");

    // 목표 수치
    const max = 2023;
    setTimeout(() => counter($counter, max), 1500);
}

 

 

 

setTimeOut() 

 - 어떤 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야 하는 경우 사용

 - 첫번째 인자로 실행할 코드를 담고 있는 함수를 받고, 두번째 인자로 시간(ms)을 받음

// callback함수를 화살표함수 형태로 사용하여 실행
setTimeout(() => console.log("1초 후에 실행"), 1000);

setTimeout(() => {
	console.log("1초 후에 실행");
}, 1000)

// callback함수를 사용하여 실행
setTimeout(function(){
	console.log("1초 후에 실행");
}, 1000)

// 함수명을 이용하여 실행
function timer() {
	console.log("1초 후에 실행");
}
const timerValue = setTimeout(timer, 1000);

- 세번째 인자부터 가변 인자를 받음

// 함수와 인자를 이용하여 실행
function mulitply(x, y) {
	console.log(x * y)
}
setTimeout(mulitply, 1000, 5, 10) // 1초 후 출력 값 50


function userInfo(name, age) {
	console.log("이름은 " + name + "이다.");
    console.log("나이는 " + age + "살 이다.");
}
const timerUserValue = setTimeout(userInfo, 1000, "찐망고", "40");

- 타임아웃아이디(Timeout ID)라고 숫자를 반환,

setTimeout() 함수를 호출할 때마다 내부적으로 생성되는 타이머객체

- 이 값을 인자로 celarTimeout() 함수를 호출하면서 기다렸다가 실행될 코드를 취소 

const timeoutId = setTimeout(() => console.log("3초 후에 실행됨"), 3000);
clearTimeout(timeoutId);

 

 

 

setInterval()

 - 웹페이지의 특정 부분을 주기적으로업데이트 하거나, 어떤 API로 부터 변경된 데이터를 주기적으로 받아야 하는 경우

 - 어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용

setInterval(() => console.log(new Date()), 1000);

Sun Dec 12 2021 12:29:06 GMT-0500 (Eastern Standard Time)
Sun Dec 12 2021 12:29:08 GMT-0500 (Eastern Standard Time)
Sun Dec 12 2021 12:29:10 GMT-0500 (Eastern Standard Time)
Sun Dec 12 2021 12:29:12 GMT-0500 (Eastern Standard Time)
Sun Dec 12 2021 12:29:14 GMT-0500 (Eastern Standard Time)
Sun Dec 12 2021 12:29:16 GMT-0500 (Eastern Standard Time)
Sun Dec 12 2021 12:29:18 GMT-0500 (Eastern Standard Time)

setInterval(() => console.log(Math.floor(Math.random() * 10)), 1000);
// 랜덤으로 1초에 한번씩 숫자 반환

 - 인터벌 아이디(Interval ID)라고 불리는 숫자를 반환

 - clearInterval()함수를 호출 하면 코드가 주기적으로 실행되는 것을 중단

const intervalId = setInterval(() => console.log(Math.floor(Math.random() * 10)), 1000);
// 랜덤으로 1초에 한번씩 숫자 반환
// 3
// 6
// 8
clearInterval(intervalId); // 종료