Settimeout JavaScript 기능 : 예제가있는 안내서

javaScript의 함수 설명 : 지연 실행 를 구현하십시오 는 지정된 지연 (밀리 초) 후에 함수를 호출하거나 코드 스 니펫을 실행하는 데 사용되는 JavaScript의 기본 기능입니다. 이는 사용자가 한동안 페이지를 탐색 한 후 팝업 창을 표시하거나 요소 호버 효과를 제거하기 전에 간단한 지연을 추가하는 등 여러 시나리오에서 유용합니다 (오해 방지).

키 포인트 :

setTimeout JavaScript의

함수를 사용하면 지정된 밀리 초 후에 함수 또는 코드 스 니펫을 실행할 수 있으며, 이는 특정 브라우징 시간 후에 팝업 표시와 같은 작업에 매우 유용합니다.

함수 참조를 첫 번째 매개 변수로 받아 함수 이름, 함수를 참조하는 변수 또는 익명 함수 일 수 있습니다. 또한 코드 문자열을 실행할 수 있지만 가독성, 보안 및 속도를 줄일 수 있으므로 권장되지 않습니다. setTimeout 익명 함수를 첫 번째 매개 변수로 사용하여 매개 변수를 에 의해 실행 된 콜백 함수로 전달할 수 있습니다. 그러나 지연 후 나열된 매개 변수에 대한 대안은 IE9 이하와 호환되지 않습니다.

에서 에 의해 실행 된 코드에서 키워드의 컨텍스트가 중요 할 때 문제가 발생할 수 있습니다. 이것은

, 라이브러리 함수 또는 화살표 기능을 사용하여 해결할 수 있습니다.

의 리턴 값은 함수와 함께 타이머를 취소하는 데 사용할 수있는 숫자 ID입니다. setTimeout 사용 예 다음 코드 블록은 2 초 (2000 밀리 초)의 시간 초과 후 콘솔에 메시지를 인쇄하는 간단한 예를 보여줍니다.
• 이 개념을보다 자세히 설명하려면 다음 데모는 버튼을 클릭 한 후 팝업 창이 표시됩니다. 문법 MDN 문서에 따르면, setTimeout의 구문은 다음과 같습니다.
• of : setTimeout 는 타이머를 취소하기 위해
와 함께 사용할 수있는 디지털 ID입니다.
• setTimeout 는 인터페이스 또는 인터페이스를 나타냅니다. this this 는 타이머가 만료 된 후 실행될 함수입니다. bind
는 타이머가 만료 될 때 컴파일 및 실행되는 함수 대신 문자열을 포함시킬 수있는 대체 구문입니다.
• setTimeout 는 함수 호출이 지연되어야하는 밀리 초의 수입니다. 생략하면 기본값은 0입니다. clearTimeout
, ...,

는 에 의해 지정된 함수로 전달되는 다른 매개 변수입니다.

setTimeout 참고 : 정사각형 브래킷

선택적 매개 변수를 나타냅니다.

및

<code class="language-javascript">function greet() {
  console.log('Howdy!');
}
setTimeout(greet, 2000);</code>

때로는 구문에

가 포함되어 있음을 알 수 있습니다. 이게 왜? window.setTimeout 브라우저에서 코드를 실행할 때

는 Global 및 scope 동일한 함수를 참조하십시오. 유일한 차이점은 두 번째 문서에서 window 메소드를 setTimeout 객체의 특성이라고합니다. window.setTimeout 내 생각에, 이것은 복잡성을 더하지만 혜택은 최소화됩니다. 먼저 찾을 수 있고 스코프 체인에서 반환되는 또 다른 메소드를 정의하면 걱정할 큰 문제가있을 수 있습니다. setTimeout 이 튜토리얼에서는 window를 생략하지만 결국에는 어떤 구문을 선택하는지입니다.

메서드 사용 예 이 메소드는 기능 참조를 첫 번째 매개 변수로 받아들입니다. setTimeout 이것은 함수의 이름 일 수 있습니다

함수를 참조하는 변수 (함수 표현식) :

또는 익명 함수 : window 위에서 언급 한 바와 같이, 실행을 위해 코드 문자열을

로 전달할 수도 있습니다.

그러나 이것은 다음과 같은 이유로 권장되지 않습니다. setTimeout 읽기가 어렵습니다 (따라서 유지 관리 및/또는 디버그).

는 잠재적 인 보안 위험 인 암시 적

를 사용합니다. setTimeout JS 통역사를 호출해야하기 때문에 대안보다 느립니다.

전달 매개 변수를

로 전달합니다 기본 시나리오에서 선호하는 크로스 브라우저 메소드는 익명 함수를 첫 번째 매개 변수로 사용하여

<code class="language-javascript">function greet() {
  console.log('Howdy!');
}
setTimeout(greet, 2000);</code>

를 사용하여 실행 된 콜백 함수로 인수를 전달하는 것입니다.

다음 예에서는

배열에서 임의의 동물을 선택 하고이 임의 동물을 함수로 매개 변수로 전달합니다. 그런 다음 는 1 초의 지연으로

<code class="language-javascript">const timeoutID = setTimeout(code);
const timeoutID = setTimeout(code, delay);

const timeoutID = setTimeout(functionRef);
const timeoutID = setTimeout(functionRef, delay);
const timeoutID = setTimeout(functionRef, delay[, arg1, arg2, /* … ,*/ argN])</code>

함수를 실행합니다.

참고 : 정기적 인 함수 ()를 사용하여 배열에서 임의의 요소를 반환했습니다. 화살표 함수를 사용하여 함수 표현식으로 쓸 수도 있습니다.

우리는 다음 섹션에서 화살표 기능을 소개합니다. 다음은 위의 코드를 포함하는 코드펜입니다 (출력을보기 위해 콘솔을 열어야 함).

<code class="language-javascript">function greet() {
  alert('Howdy!');
}
setTimeout(greet, 2000);</code>

대체 방법 기사의 상단에있는 구문에서 에 의해 실행 된 콜백 함수로 매개 변수를 전달하는 두 번째 방법이 있음을 알 수 있습니다. 여기에는 지연 후 매개 변수를 나열하는 것이 포함됩니다. setTimeout 우리의 이전 예를 참조하십시오. 이것은 우리에게 줄 것입니다 : </previous></t></p> <pre class="brush:php;toolbar:false"><code class="language-javascript">const greet = function() { alert('Howdy!'); }; setTimeout(greet, 2000);</code> 불행히도, 이것은 IE9 이하에서 작동하지 않으며, 여기서 매개 변수는

로 전달됩니다. 불행히도 IE9에 대한 지원이 필요하다면 MDN에 폴리 필이 제공됩니다.

키워드 질문 실행 된 코드는 호출하는 함수와 다른 실행 컨텍스트에서 실행됩니다. 키워드의 컨텍스트가 중요 할 때 문제가됩니다.

이 출력의 이유는 첫 번째 예에서 가 setTimeout 객체를 가리키고 두 번째 예에서 this가 글로벌 속성이 없습니다. ).

<code class="language-javascript">function greet() {
  console.log('Howdy!');
}
setTimeout(greet, 2000);</code>

이 문제를 해결하기 위해 다양한 방법이 있습니다 ...

this의 값의 설명 설정 메소드를 사용하여 새 함수를 생성 할 수 있으며 호출되면 키워드가 제공된 값 (이 경우 dog 객체)으로 설정됩니다. 이것은 우리에게 줄 것입니다 : this window 사용자 라이브러리 sound 많은 라이브러리에는이 문제를 해결하기 위해 내장 기능이 제공됩니다. 예를 들어, jquery의 방법입니다. 함수를 받아들이고 항상 특정 컨텍스트를 갖는 새로운 함수를 반환합니다. 이 경우에는 다음과 같습니다.

에서 화살표 기능을 사용하십시오 화살표 함수는 ES6에 도입되었습니다. 일반 기능의 구문보다 훨씬 짧습니다.

물론 는 와 함께 사용할 수 있지만, 한 가지 주목할 사항 - 화살표 함수에는 고유 한 this 값이 없습니다. 대신, 그들은 동봉 된 어휘 컨텍스트의 <:> 정기적 인 기능 사용 :

bind 화살표 기능을 사용하십시오 : bind 두 번째 예제에서 this는 dog가 글로벌 객체를 가리 킵니다 (다시, 속성이 없습니다).

이것은 와 함께 화살표 함수를 사용할 때 문제를 일으킬 수 있습니다. 우리는

<code class="language-javascript">const timeoutID = setTimeout(code);
const timeoutID = setTimeout(code, delay);

const timeoutID = setTimeout(functionRef);
const timeoutID = setTimeout(functionRef, delay);
const timeoutID = setTimeout(functionRef, delay[, arg1, arg2, /* … ,*/ argN])</code>

: 에서 호출 된 함수에 대한 올바른

값을 제공하는 방법을 보았습니다.

화살표 함수에는 고유 한

값이 없기 때문에 도입 된 방법에서 화살표 함수를 사용할 때는 작동하지 않습니다. 이 메소드는 여전히 를 기록합니다. jQuery.proxy() 화살표 기능 및 를 사용하여 클리너 코드 작성 그러나 화살표 함수에는 고유 한

값이 없기 때문에 이점을 제공 할 수도 있습니다.

<code class="language-javascript">function greet() {
  alert('Howdy!');
}
setTimeout(greet, 2000);</code>

코드를 다음과 같이 고려하십시오

화살표 기능을 사용하여보다 간결하게 다시 작성할 수 있습니다. setTimeout 화살표 함수의 시작을 알고 싶다면 "ES6 화살표 기능 : JavaScript의 간결한 구문"을 읽으십시오.

취소 타이머 우리가 기사의 시작 부분에서 배운 것처럼

의 반환 값은 함수와 함께 사용될 수있는 숫자 ID입니다.

<code class="language-javascript">function greet() {
  console.log('Howdy!');
}
setTimeout(greet, 2000);</code>

실제로 어떻게 작동하는지 봅시다. 아래 펜에서 시작 카운트 다운 버튼을 클릭하면 카운트 다운이 시작됩니다. 카운트 다운이 완료되면 새끼 고양이가 승리합니다. 그러나 "Countdown 정지"버튼을 누르면 타이머가 중지되어 재설정됩니다. (카운트 다운이 0에 도달 할 때 멋진 효과가 표시되지 않으면 바닥 오른쪽에 내장 된 버튼을 사용하여 펜을 다시 실행하십시오.)

요약 이 기사에서는 함수 실행을 지연시키기 위해

를 사용하는 방법을 보여줍니다. 또한 매개 변수를

로 전달하는 방법, 콜백 함수 내에서

값을 유지하는 방법 및 타이머를 취소하는 방법을 보여주었습니다.

JavaScript 함수의 FAQS setTimeout setTimeout this JavaScript는 무엇입니까?

는 지정된 지연 (밀리 초) 후 함수 또는 코드 세그먼트의 실행을 예약 할 수있는 JavaScript의 내장 함수입니다. setTimeout

• 어떻게 작동합니까? setTimeout 함수를 호출 할 때는 실행할 함수 또는 코드와 밀리 초 지연의 두 매개 변수를 제공해야합니다. 제공된 기능/코드가 큐에 추가되며 지정된 지연 후에는 큐에서 통화 스택으로 이동하여 실행됩니다.

  setTimeout 를 사용하는 대안은 무엇입니까?

  예, 지정된 간격으로 함수를 반복하는
와 같은 대안이 있으며, 더 부드러운 애니메이션과 더 나은 브라우저 성능을위한 최신
• 가 있습니다.

  setTimeout 언제 사용해서는 안됩니까

  ?

  setTimeout 는 JavaScript에서 비동기 코드 실행을 예약하는 데 유용한 도구이지만 경우에 따라 최선의 선택은 아닐 수도 있습니다. 정확한 애니메이션이나 게임의 경우

  를 사용해야합니다. 다중 호출을 중첩하지 않아야합니다. 약속 또는 비동기 모드를 사용하는 것이 좋습니다. 10 밀리 초 미만의 지연에 대해서는 부정확합니다. 온라인 멀티 플레이어 게임 또는 금융 거래 플랫폼과 같은 실시간 응용 프로그램을 구축하는 경우 Websockets와 같은 실시간 기술을 선택하십시오. 대규모 CPU 집약적 인 작업은 이벤트 루프를 차단할 수 있습니다.

• 작업을 취소 할 수 있습니까? setTimeout 예, 함수를 사용하여 예정된 시간 초과를 취소 할 수 있습니다. 매개 변수로 에 의해 반환 된 시간 초과 ID가 필요합니다. 예를 들면 :

  setInterval requestAnimationFrame

  와 의 차이점은 무엇입니까?
지정된 지연 후 한 번 실행하도록 함수를 예약하고

는 취소되거나 프로그램이 중지 될 때까지 지정된 간격으로 반복적으로 실행하도록 함수를 예약하십시오. setTimeout setInterval

내가 사용할 수있는 최소 지연 값은 얼마입니까?
• 최소 지연 값은 0이므로 현재 스레드가 완료되기 전에 함수가 실행될 예정이지만 보류중인 이벤트를 처리합니다. 그러나 타이머의 실제 세분화는 브라우저마다 다릅니다. 일부 환경은 10 밀리 초 미만의 지연을 지원하지 않을 수 있습니다.

  setTimeout node.js는 무엇입니까?

  는 지정된 밀리 초에 주어진 함수 또는 코드 블록의 실행을 지연시키는 Node.js의 내장 함수입니다.

• node.js에서 를 사용하는 방법은 무엇입니까? setTimeout 다음과 같이 함수를 사용할 수 있습니다.

  여기서

  는 지정된 밀리 초 지연 후에 실행하려는 기능입니다. setTimeout

node.js에서
• 를 사용하기위한 모범 사례는 무엇입니까?

  일부 모범 사례에는 콜백으로 명명 된 기능을 사용하고, 오류를 우아하게 처리하고, 예기치 않은 지연이나 막힘을 피하기 위해 이벤트 루프의 동작을 이해하는 것이 포함됩니다. 또한 다음 이벤트 루프 사이클에서 즉시 실행하려면 를 사용하는 것을 고려하십시오. setTimeout (입력 텍스트에는 코드펜에 대한 링크가 포함되어 있으므로 출력에서 ​​코드펜의 내용을 직접 렌더링 할 수 없습니다. 코드 페펜 데모를보기 위해 기사에 제공된 링크를 방문해야합니다.)

  .

위 내용은 Settimeout JavaScript 기능 : 예제가있는 안내서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!