자바스크립트 settimeout 사용법

JavaScript의 setTimeout()은 일정 시간이 지난 후 특정 코드를 실행할 수 있게 해주는 매우 유용한 함수입니다. 이 메소드는 실행할 코드와 밀리초 단위의 시간이라는 두 가지 매개변수를 받습니다. 지정된 시간이 지나면 실행된 코드가 호출됩니다.

setTimeout() 메서드는 지연 효과를 생성하거나 특정 시간 이후에 특정 작업을 수행하는 데 자주 사용됩니다. 간단한 경고 창 및 팝업 메시지부터 복잡한 기능이나 작업 수행에 이르기까지 지정된 시간 이후에 모든 JavaScript 코드를 실행할 수 있습니다.

이제 setTimeout 사용법에 대해 자세히 알아 보겠습니다.

코드 실행 지연

코드 실행 지연은 setTimeout의 가장 기본적인 용도 중 하나입니다. 다음은 기본 예입니다.

setTimeout(function(){
    alert("Hello World!");
}, 3000);

위 코드는 사용자가 3초를 기다린 후 "Hello World!" 메시지 상자를 표시합니다.

코드에서 첫 번째 매개변수는 함수를 직접 호출하는 대신 코드를 실행해야 하기 때문에 익명 함수입니다. 두 번째 매개변수는 지연 시간을 지정하며, 여기서는 밀리초입니다. 이 예에서는 기간으로 3초(3000밀리초)를 지정합니다.

DOM 요소 조작

setTimeout()을 사용하여 DOM 요소를 조작할 수도 있습니다. 예를 들어 다음 코드는 일정 시간이 지난 후 페이지 제목 요소의 내용을 변경합니다.

let pageTitle = document.getElementById("page-title");
setTimeout(function(){
    pageTitle.textContent = "New Page Title";
}, 5000);

이 예에서는 먼저 ID가 "page-title"인 페이지 요소를 가져와 변수에 저장합니다. 다음으로 setTimeout()을 사용하여 요소의 textContent 속성을 변경하고 페이지 제목을 "새 페이지 제목"으로 변경했습니다. 이 예에서는 5초의 지연을 사용했습니다.

Cancel setTimeout()

어떤 경우에는 타이머가 완료되기 전에 setTimeout() 함수의 실행을 취소해야 할 수도 있습니다. 타이머를 취소하려면 ClearTimeout() 함수를 사용하면 됩니다. 예를 들어, 다음 코드는 첫 번째 인수로 setTimeout() 함수 호출 시 타이머를 생성합니다. 5초 후 사용자가 요소를 클릭하면 타이머가 취소됩니다.

let timer = setTimeout(function(){
    alert("You've waited too long!");
}, 5000);

document.getElementById("some-element").addEventListener("click", function(){
    clearTimeout(timer);
});

이 예에서는 나중에clearTimeout() 함수를 사용하여 타이머를 취소할 수 있도록 먼저 타이머의 ID 번호를 저장합니다. 다음으로 addEventListener() 함수를 사용하여 페이지의 요소를 클릭하는 사용자와 타이머를 지우는 코드를 연결합니다. 이 접근 방식을 사용하면 특정 조건에 도달하면 지연된 작업을 취소할 수 있습니다.

결론

setTimeout()은 지연 후 코드를 실행하는 데 매우 유용한 함수입니다. 경고 창 표시, DOM 요소 조작, 지연 효과 추가, 복잡한 기능 실행 등 다양한 목적으로 사용될 수 있습니다. 모든 경우에, ClearTimeout() 함수를 사용하여 타이머를 취소하고 작업 실행을 방지할 수 있습니다.

위 내용은 자바스크립트 settimeout 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!