웹 개발자로서 웹 애플리케이션의 반응성과 상호 작용은 사용자 경험의 핵심 구성 요소입니다. 애플리케이션의 사용자 경험을 향상시키려면 동적 동작을 추가하고 애플리케이션의 특정 코드가 실행되는 시간을 제어해야 합니다.
setTimeout() 메서드는 코드 실행을 예약하고, 애니메이션을 오케스트레이션하고, 타이머를 만들고, 응용 프로그램에서 비동기 작업을 관리할 수 있게 해주기 때문에 이를 위한 훌륭한 도구입니다.
따라서 setTimeout()의 구문과 사용 방법, 다음 프로젝트에 적용할 수 있는 방법을 이해하는 것이 중요합니다. 이 기사에서는 바로 그것을 탐색하고 setTimeout() 메소드를 최대한 활용할 수 있도록 올바른 지식을 제공합니다.
자바스크립트의 setTimeout 함수
setTimeout()은 창 개체에 바인딩된 전역 메서드이며 일정 기간 후에 함수 또는 코드 조각을 실행하는 데 사용됩니다. 예를 들어, 4초 후에 실행하려는 함수가 있는 경우 setTimeout()을 사용하여 이를 달성할 수 있습니다.
사용하는 경우 setTimeout() 메서드는 지정한 시간이 경과할 때까지 카운트다운하는 타이머를 설정한 다음 전달한 함수나 코드를 실행합니다.
전역 메서드라는 것은 setTimeout()이 전역 개체 내에서 발견되고 따라서 가져올 필요 없이 어디에서나 사용할 수 있음을 의미합니다. 브라우저에서 DOM(Document Object Model)이 제공하는 전역 객체는 속성 이름 창에서 참조합니다.
따라서 window.setTimeout() 또는 단순히 setTimeout()을 사용할 수 있습니다. window.setTimeout()과 setTimeout()은 차이가 없습니다.
setTimeout()의 일반 구문은 다음과 같습니다.
setTimeout(function, delay)
- function – 이것은 주어진 시간 후에 실행될 함수입니다.
- 지연 – 전달된 함수가 실행되기까지의 시간(밀리초)입니다. 1초는 1000밀리초에 해당합니다.
setTimeout()을 사용할 때 지정하는 지연은 원하지 않는 결과를 피하기 위해 숫자 값이어야 합니다. 지연 인수는 선택 사항입니다. 지정하지 않으면 기본값은 0이고 전달된 함수는 즉시 실행됩니다.
setTimeout()은 setTimeout() 메서드가 호출될 때 생성된 타이머를 고유하게 식별하는 양의 정수인 timeoutID라는 고유 식별자를 반환합니다.
setTimeout()이 비동기라는 점도 중요합니다. 타이머는 호출 스택에서 다른 함수의 실행을 중지하지 않습니다.
setTimeout() 사용 방법
setTimeout() 메서드를 사용하는 방법을 보여주는 예를 살펴보겠습니다.
// setTimeout() with a function declaration
setTimeout(function () {
console.log("Hello World after 3 seconds");
}, 3000)
// setTimeout() with an arrow function
setTimeout(() => {
console.log("Hello World in an arrow function - 1 second")
}, 1000)
산출:
Hello World in an arrow function - 1 second Hello World after 3 seconds
위의 출력에서 두 번째 setTimeout()은 지연 시간이 3초인 첫 번째 설정에 비해 지연 시간이 1초로 짧기 때문에 먼저 출력을 로그아웃합니다. 앞서 언급했듯이 setTimeout()은 비동기식입니다. 3초 지연된 첫 번째 setTimeout()이 호출되면 3초 타이머가 시작되지만 프로그램의 다른 코드 실행을 중지하지는 않습니다.
메서드가 3부터 카운트다운되면 호출 스택의 나머지 코드가 실행됩니다. 이 예에서 다음 코드는 1초 지연된 두 번째 setTimeout()입니다. 지연이 훨씬 짧기 때문에 코드가 첫 번째 setTimeout() 전에 실행되는 이유입니다.
setTimeout()을 사용하면 setTimeout() 메서드에 함수를 직접 작성할 필요가 없습니다.
// function declaration
function greet() {
console.log("Hello there!")
}
// store a function in a variable - function expression
const speak = function () {
console.log("How are you doing?")
}
// using an arrow function
const signOff = () => {
console.log("Yours Sincerely: koreantech.org:)")
}
// pass in a function reference to setTimeout()
setTimeout(greet, 1000)
setTimeout(speak, 2000)
setTimeout(signOff, 3000)
산출:
Hello there! How are you doing? Yours Sincerely: koreantech.org:)
다른 곳에서 메서드를 정의한 다음 setTimeout()을 전달할 때 setTimeout() 메서드에 전달하는 것은 지정된 시간 후에 실행하려는 함수에 대한 참조입니다.
추가 매개변수가 있는 setTimeout()
setTimeout()에는 setTimeout() 메서드에 추가 매개 변수를 전달할 수 있는 대체 구문이 있습니다. 이 매개변수는 지연 후 실행하는 함수에서 사용됩니다.
구문은 다음과 같습니다.
setTimeout(functionRef, delay, param1, param2, /* …, */ paramN)
참조하는 함수에 필요한 인수의 수에 따라 주어진 수의 추가 매개변수를 전달할 수 있습니다.
아래 기능을 고려하십시오.
function greet (name, message) {
console.log(`Hello ${name}, ${message}`)
}
setTimeout()을 사용하여 일정 시간 후에 위 함수를 실행하려면 다음과 같이 하면 됩니다.
// setTimeOut() with additional parameters
function greet (name, message) {
console.log(`Hello ${name}, ${message}`)
}
setTimeout(greet, 2000, "John", "happy coding!");
산출:
Hello John, happy coding!
다른 곳에서 함수를 정의한 다음 setTimeout()에 전달하면 전달하는 것은 단순히 함수에 대한 참조일 뿐입니다. 위의 예에서 우리는 함수를 호출하는 greet()가 아니라 참조 greet를 전달합니다. 우리는 참조를 사용하여 함수를 호출하는 것이 setTimeout()이기를 원합니다.
이것이 바로 아래와 같이 추가 매개변수를 직접 전달할 수 없는 이유입니다.
// This results in an ERR_INVALID_ARG_TYPE error
setTimeout(greet("John", "happy coding!"), 2000);
위의 코드에서 2초가 경과할 때까지 기다리지 않고 바로 welcome 함수를 실행합니다. 그러면 오류가 발생합니다. 코드 실행 결과는 아래와 같습니다.
setTimeout() 취소
clearTimeout() 메서드를 사용하여 setTimeout()을 사용하여 예약된 함수의 실행을 방지할 수 있습니다. 특정 기간 후에 실행되도록 함수를 설정했지만 특정 조건이 충족되거나 조건이 변경된 후에 함수가 실행되는 것을 원하지 않는 경우 이러한 작업이 필요할 수 있습니다.
clearTimeout() 메서드의 구문은 다음과 같습니다.
clearTimeout(timeoutID)
clearTimeout()은 setTimeout() 메서드에서 반환된 고유 식별자인 timeoutID라는 단일 인수를 사용합니다.
아래 예를 고려하십시오.
function text() {
console.log("This is not going to be printed")
}
function greet() {
console.log("Hello after 5 seconds")
}
// Schedule the function text() to be executed after 3 seconds
const timeOutID = setTimeout(text, 3000);
// cancelt text() timeout time using clearTimeout()
clearTimeout(timeOutID)
console.log(`${timeOutID} cleared out`)
// Schedule the function greet() to be executed after 5 seconds
setTimeout(greet, 5000)
산출:
2 cleared out Hello after 5 seconds
text() 함수는 timeout을 취소하기 위해 clearTimeout()을 사용하여 실행되지 않으므로 실행되지 않습니다.
setTimeout() 사용의 이점
setTimeout() 메서드를 사용하면 다음과 같은 이점이 있습니다.
- 코드 실행 지연 – setTimeout()의 주요 기능은 개발자가 코드 실행을 지연할 수 있도록 하는 것입니다. 이것은 애니메이션을 만들고, 시간이 지정된 이벤트를 관리하고, 비동기 코드의 흐름을 제어할 때 중요한 기능입니다. setTimeout()은 또한 메인 스레드를 해제하여 다른 코드를 실행합니다.
- 타이머 구현 – setTimeout()은 외부 라이브러리를 사용하거나 복잡한 날짜 작업을 수행할 필요 없이 응용 프로그램에서 간단한 타이머를 구현하는 간단한 방법을 제공합니다.
- 스로틀링 및 디바운싱 – setTimeout()은 특히 스크롤 또는 입력과 같은 이벤트 중에 특정 함수가 호출되거나 수행되는 작업의 횟수를 제한하는 데 사용할 수 있습니다. 디바운싱을 사용하면 애플리케이션이 함수를 호출하기 전에 일정 시간 동안 대기합니다. 스로틀링은 주어진 시간 내에 수행되는 함수 호출 수를 제한합니다. setTimeout()을 사용하여 이 두 가지를 모두 달성할 수 있습니다.
- 사용자 경험 향상 – setTimeout()을 사용하면 알림, 경고, 팝업 메시지 및 애니메이션이 표시되는 시기와 같은 특정 작업이 발생하는 시기를 제어하여 애플리케이션의 사용자 경험을 향상시킬 수 있습니다. 이는 사용자에 대한 정보 과부하를 방지하여 사용자 경험을 향상시키는 데 유용합니다.
- 웹 성능 향상 – setTimeout()을 사용하여 복잡한 문제를 더 작고 훨씬 간단한 문제로 분해하여 웹 응용 프로그램의 성능과 전반적인 응답성을 향상시킬 수 있습니다. 이러한 작은 문제는 setTimeout() 내에서 처리할 수 있으므로 코드의 다른 부분이 계속 실행되도록 하여 애플리케이션의 성능이나 응답성에 영향을 미치지 않습니다.
분명히 setTimeout()은 JavaScript를 사용하여 애플리케이션을 구축할 때 강력하고 매우 유용합니다.
setTimeout() 사용의 단점
setTimeout() 사용의 몇 가지 단점은 다음과 같습니다.
- 부정확한 타이밍 – setTimeout()은 함수가 호출되거나 작업이 수행되는 정확한 시간을 보장할 수 없습니다. 때때로 잘못 작성된 다른 코드는 setTimeout()의 작동에 영향을 미치는 경합 상태로 이어집니다. 겹치는 setTimeout()을 여러 개 사용하는 경우 특히 다른 비동기 작업이 관련된 경우 실행 순서를 항상 확신할 수 없습니다.
- Callback Hell – 중첩된 setTimeout() 호출이 너무 많으면 코드를 읽고 디버깅하기 어려워질 수 있습니다. 애플리케이션에서 논리의 흐름을 따르는 것도 매우 어려울 것입니다. 너무 많은 setTimeout()을 사용하면 setTimeout() 호출이 제대로 처리되지 않으면 응용 프로그램에서 메모리 문제가 발생할 수도 있습니다.
setTimeout()을 사용하면 일부 문제를 방지할 수 있지만 모범 사례와 우수한 코딩 사례를 고수하면 애플리케이션의 단점을 최소화하거나 완전히 피할 수 있습니다.
결론
setTimeout() 메서드를 사용하여 함수 실행을 지연시킬 수 있습니다. setTimeout은 일반적으로 애니메이션, 콘텐츠 로드 지연 및 요청에 대한 시간 초과 처리에 사용됩니다.
예를 들어 setTimeout()을 사용하여 웹 페이지에 경고를 표시할 수 있습니다. setTimeout()은 함수가 실행되는 정확한 시간을 보장하지 않지만 설정된 지연 후 실행을 보장합니다.
효율적인 코딩을 위해 JavaScript ORM 플랫폼을 탐색할 수도 있습니다.