[javascript] setTimeout과 setInterval을 사용한 사용자 인터페이스 개선

05 Dec 2023

javascript

웹 개발에서 사용자 인터페이스의 개선은 매우 중요한 요소입니다. 사용자들은 웹 페이지가 반응적이고 빠르게 동작하는 것을 원하기 때문에, 효과적인 인터페이스 개발은 필수입니다. 이를 위해 JavaScript의 setTimeout과 setInterval 함수를 활용할 수 있습니다.

setTimeout 함수

setTimeout 함수는 일정 시간이 지난 후에 코드를 실행할 수 있도록 하는 함수입니다. 이를 사용하여 웹 페이지의 일부를 동적으로 변경하거나 특정 작업을 수행할 수 있습니다. setTimeout 함수는 다음과 같이 사용됩니다.

setTimeout(function() {
    // 실행할 코드
}, delay);

여기서 function() { // 실행할 코드 } 는 일정 시간이 지난 후 실행될 콜백 함수입니다. delay는 밀리초 단위의 지연 시간을 나타냅니다.

예를 들어, 다음과 같이 setTimeout 함수를 사용하여 3초 후에 “안녕하세요!”라는 텍스트를 화면에 표시할 수 있습니다.

setTimeout(function() {
    document.getElementById("greeting").innerHTML = "안녕하세요!";
}, 3000);

setInterval 함수

setInterval 함수는 일정 시간마다 코드를 실행할 수 있도록 하는 함수입니다. 이를 사용하여 반복적으로 작업을 수행하거나 주기적으로 업데이트해야 하는 부분을 처리할 수 있습니다. setInterval 함수는 다음과 같이 사용됩니다.

setInterval(function() {
    // 실행할 코드
}, interval);

여기서 function() { // 실행할 코드 } 는 주기적으로 실행될 콜백 함수입니다. interval은 밀리초 단위의 실행 간격을 나타냅니다.

예를 들어, 다음과 같이 setInterval 함수를 사용하여 1초마다 현재 시각을 표시하는 시계를 만들 수 있습니다.

setInterval(function() {
    var now = new Date();
    document.getElementById("clock").innerHTML = now.toLocaleTimeString();
}, 1000);

주의사항

setTimeout과 setInterval 함수를 사용할 때 주의해야 할 몇 가지 사항이 있습니다.

적절한 지연 시간과 실행 간격을 설정해야 합니다. 너무 짧은 지연 시간이나 실행 간격은 성능의 악화를 초래할 수 있습니다.
setTimeout과 setInterval 함수를 사용한 작업이 필요하지 않을 때 개발자가 직접 멈추어 주어야 합니다. clearInterval 함수를 사용하여 setInterval 함수를 멈출 수 있고, clearTimeout 함수를 사용하여 setTimeout 함수를 멈출 수 있습니다.

결론

setTimeout과 setInterval 함수는 웹 개발에서 사용자 인터페이스의 개선에 매우 유용합니다. 이러한 함수를 적절히 활용하여 웹 페이지의 반응성을 향상시키고 사용자 경험을 개선할 수 있습니다. 적절한 지연 시간과 실행 간격을 설정하고, 필요한 경우 작업을 중지하는 방법을 잘 숙지하여 사용해야 합니다.

참고 자료: