JavaScript에서 setTimeout 사용

JavaScript로 작업할 때 함수를 실행하기 위해 일정 시간을 기다려야 하는 지점이 있을 것입니다.

예를 들어 특정 시간 이후에 애니메이션을 적용할 수 있습니다.

예를 들어, 이 copy text to clipboard script 에서는 시간 초과를 사용하여 텍스트를 이전으로 다시 변경합니다.

자바스크립트 setTimeout 함수

가장 기본적인 형태의 함수는 다음과 같습니다.

setTimeout(() => {
  // Run after 100 milliseconds
}, 100);

숫자100는 실행을 기다리는 밀리초를 나타냅니다.

보시다시피 기본 예제는 호출될 화살표 함수 배열을 사용합니다.
다음과 같은 방법으로 함수를 전달할 수도 있습니다.

const coolFunc = () => {
  console.log('do a trick');
};

setTimeout(coolFunc, 200);

그리고 다시, 이것은 위의 것과 동일하게 할 것입니다.

그러나 함수가 매개변수를 취한다고 가정해 보겠습니다. 이 설정으로도 그렇게 할 수 있습니다.

const coolFunc = (name, age) => {
  console.log(`Hi ${name} you are ${age} years old?`);
};

setTimeout(coolFunc, 200, 'Chris', 32);

보시다시피 props는 timeout 매개변수 뒤에 전달됩니다.

당신이 생각을 참조하십시오!
시간을 0으로 설정하면 어떻게 될까요?

좋은 질문입니다. 즉시 실행됩니다.

하지만! 이것은 나중에 스크립트에 나타나더라도 다른 모든 함수가 완료된 후에만 호출됩니다.

setTimeout(() => {
  console.log('zero wait timeout');
}, 0);

console.log('first');

const otherFunction = () => {
  console.log('The other function');
};

otherFunction();

결과:

퍼스트

다른 기능

제로 대기 시간 초과

보시다시피 setTimeout은 0밀리초가 있어도 마지막에만 실행됩니다.

setTimeout 기능 취소

계획한 시간 초과를 중단하려는 경우가 있습니다.

타임아웃을 함수로 정의할 수 있으며 이를 지울 수 있는 옵션을 제공합니다.

const timer = setTimeout(() => {
  console.log(`I'll explode! 💣`);
}, 2000);

clearTimeout(timer);

Oef, 다행히도 이 폭탄은 터지지 않았습니다! 👀

이제 setTimeout 함수의 모든 기본 사항을 다루었습니다.

실제 사례를 더 보고 싶으시다면 이를 사용하는 기사 목록이 있습니다.

How is your year loading

Redirect a web page

또는 이 CodePen을 확인하고 가지고 놀 수 있습니다.

읽어주셔서 감사합니다. 연결해 보겠습니다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook 또는