두 가지 일반적인 JS 지연 방법에 대한 자세한 설명

JavaScript에서는 특정 기능을 달성하기 위해 지연 작업을 수행해야 하는 경우가 많습니다. 예를 들어 웹 페이지에 애니메이션을 표시하거나 비동기 요청을 실행할 때 JS의 실행 시간을 제어해야 합니다. 이 기사에서는 setTimeout 및 setInterval 함수를 포함하여 두 가지 일반적인 JS 지연 메서드를 소개합니다.

1. setTimeout 함수

setTimeout 함수를 사용하면 일정 시간이 지난 후 함수나 코드 조각을 실행할 수 있습니다. 이 함수는 두 개의 매개변수를 받습니다. 첫 번째 매개변수는 실행될 함수 또는 코드 조각이고, 두 번째 매개변수는 밀리초 단위의 지연 시간입니다. 예:

setTimeout(function() {
    console.log('Hello World!');
}, 1000);

위 코드는 1초 후에 "Hello World!"를 콘솔에 인쇄한다는 의미입니다. 화살표 함수 형식으로 작성할 수도 있습니다.

setTimeout(() => console.log('Hello World!'), 1000);

지연이 끝나기 전에 setTimeout 작업을 취소하려면clearTimeout 함수를 사용할 수 있습니다. 이 함수는 setTimeout의 고유 식별자를 매개변수로 받습니다.

let timeoutId = setTimeout(() => console.log('Hello World!'), 1000);
clearTimeout(timeoutId);

위 코드에서는 먼저 setTimeout 함수를 통해 지연된 작업을 생성하고 해당 식별자를 timeoutId 변수에 저장한 다음 지연된 작업을 즉시 지웁니다.

2. setInterval 함수

setInterval 함수는 setTimeout 함수와 유사하며 작업 지연을 구현하는 데에도 사용됩니다. 차이점은 setInterval 함수가 중지될 때까지 일정한 간격으로 지정된 함수 또는 코드 조각을 반복하고 실행한다는 것입니다. 이 함수는 두 개의 매개변수를 받습니다. 첫 번째 매개변수는 실행될 함수 또는 코드 조각이고, 두 번째 매개변수는 두 실행 사이의 시간(밀리초)입니다. 예:

setInterval(function() {
    console.log('I am running!');
}, 1000);

위 코드는 1초마다 'I am running!'을 출력한다는 의미입니다.

setInterval 루프의 함수 실행을 중지해야 하는 경우 setInterval의 고유 식별자를 매개변수로 받는clearInterval 함수를 사용할 수 있습니다.

let intervalId = setInterval(() => console.log('I am running!'), 1000);
clearInterval(intervalId);

위 코드에서는 먼저 setInterval 함수를 통해 루프가 수행하는 작업을 생성하고 해당 식별자를 IntervalId 변수에 저장한 다음 작업을 즉시 중지합니다.

Summary

setTimeout 및 setInterval 함수는 프론트 엔드 개발에서 매우 일반적이며, 이를 통해 JS 프로그램을 보다 정확하게 제어하고 예약할 수 있습니다. 특정 구현 중에는 예기치 않은 결과를 방지하기 위해 매개변수 설정 및clearTimeout 또는clearInterval 함수를 사용하는 작업 취소에 주의해야 합니다. 이 글이 JS 초보자들에게 도움이 되기를 바랍니다.

위 내용은 두 가지 일반적인 JS 지연 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!