JavaScript를 사용하여 지정된 시간 후에 함수를 실행하는 방법

내장된 setTimeout()을 사용하여 JavaScript 함수의 실행을 지연할 수 있습니다. 방법.

3초 후에 알림 대화 상자를 표시하고 싶다고 가정해 보겠습니다.

먼저 3초를 3000ms인 밀리초(ms)로 변환한 다음 함수를 설정해야 합니다.

setTimeout(function() {
  alert("That’s 3 seconds!")
}, 3000)

위의 함수는 익명(이름 없는) 함수로, 한 번만 사용할 수 있고 설명이 불가능하기 때문에 실생활에서 그다지 실용적이지 않습니다.

다음은 완전히 동일한 기능이지만 이름이 지정된 함수 표현식:입니다.

const delayThreeSeconds = function() {
  alert("That’s 3 seconds!")
}

setTimeout(delayThreeSeconds, 3000)

이제 delayThreeSeconds를 참조하여 프로젝트의 어느 곳에서나 지연 기능을 재사용할 수 있습니다. 변수.

setTimeout 지연이 암시적이며 정확하지 않음

대부분의 사람들은 setTimeout에 지정한 시간이 최소 함수 실행 지연이라는 것을 모릅니다. — 실행에 걸리는 정확한 양은 아닙니다.

따라서 3000ms(3초)를 지정하면 자바스크립트가 동기식이므로 한 번에 하나의 작업을 실행하는 함수가 실행되기까지 훨씬 더 오래 걸릴 수 있습니다.

따라서 웹사이트에 setTimeout 전에 실행되도록 설정된 다른 JavaScript 함수 작업이 많이 있는 경우 기능을 사용하려면 이러한 작업을 먼저 완료해야 하며 몇 밀리초에서 몇 초까지 걸릴 수 있습니다.

엄청난 지연을 일으킬 수 있는 것은 함수 중 하나가 완료하기 위해 외부 소스에서 거대한 스크립트를 로드하는 데 의존하는 경우입니다. 이러한 유형의 함정은 초보자 또는 숙련된 개발자로서도 빠질 수 있습니다.

이 모든 것이 setTimeout을 만듭니다. 다소 예측할 수 없거나 정확한 정밀도가 필요한 경우 최소한 신뢰할 수 없습니다.

이 문제를 피하는 간단한 방법(대부분)

프로젝트에 정확한 타이밍이 중요한 특정 기능이 있는 경우 다른 기능보다 먼저 실행되도록 설정하십시오. 이렇게 하면 최소한 가장 중요한 기능이 최대한 빨리 실행됩니다.

그러나 가장 중요한 기능이 다른 코드보다 먼저 실행되도록 설정되어 있어도 여전히 일부 실행 지연.

예를 들어 사용자의 브라우저에 여러 애드온/확장 프로그램이 설치되어 있는 경우입니다. 그 소프트웨어는 (무엇보다도) JavaScript에서 실행되며 웹사이트의 코드 실행이 지연될 정도나 발생 여부를 예측하는 것은 불가능합니다.

이것이 바로 성능이 집중해야 할 중요한 주제인 이유와 일관된 사용자 경험을 제공하기 위해 모든 브라우저와 여러 기기에서 코드 성능을 테스트하는 것이 중요한 이유입니다.

알아두면 좋은 정보: 오늘 배운 내용은 setInterval에도 적용됩니다. 메소드의 차이점은 반복적으로 실행된다는 것입니다. — setTimeout 한 번 실행됩니다.