javaScript의 함수 설명 : 지연 실행 를 구현하십시오
는 지정된 지연 (밀리 초) 후에 함수를 호출하거나 코드 스 니펫을 실행하는 데 사용되는 JavaScript의 기본 기능입니다. 이는 사용자가 한동안 페이지를 탐색 한 후 팝업 창을 표시하거나 요소 호버 효과를 제거하기 전에 간단한 지연을 추가하는 등 여러 시나리오에서 유용합니다 (오해 방지).
키 포인트 :
setTimeout
JavaScript의
함수를 사용하면 지정된 밀리 초 후에 함수 또는 코드 스 니펫을 실행할 수 있으며, 이는 특정 브라우징 시간 후에 팝업 표시와 같은 작업에 매우 유용합니다.
함수 참조를 첫 번째 매개 변수로 받아 함수 이름, 함수를 참조하는 변수 또는 익명 함수 일 수 있습니다. 또한 코드 문자열을 실행할 수 있지만 가독성, 보안 및 속도를 줄일 수 있으므로 권장되지 않습니다. setTimeout
익명 함수를 첫 번째 매개 변수로 사용하여 매개 변수를 에 의해 실행 된 콜백 함수로 전달할 수 있습니다. 그러나 지연 후 나열된 매개 변수에 대한 대안은 IE9 이하와 호환되지 않습니다.
에서 에 의해 실행 된 코드에서 키워드의 컨텍스트가 중요 할 때 문제가 발생할 수 있습니다. 이것은 , 라이브러리 함수 또는 화살표 기능을 사용하여 해결할 수 있습니다.
의 리턴 값은 함수와 함께 타이머를 취소하는 데 사용할 수있는 숫자 ID입니다. setTimeout
사용 예
다음 코드 블록은 2 초 (2000 밀리 초)의 시간 초과 후 콘솔에 메시지를 인쇄하는 간단한 예를 보여줍니다.
-
이 개념을보다 자세히 설명하려면 다음 데모는 버튼을 클릭 한 후 팝업 창이 표시됩니다.
문법
MDN 문서에 따르면,
setTimeout의 구문은 다음과 같습니다.
- of :
setTimeout
는 타이머를 취소하기 위해 와 함께 사용할 수있는 디지털 ID입니다. -
setTimeout 는 인터페이스 또는 인터페이스를 나타냅니다. this
this 는 타이머가 만료 된 후 실행될 함수입니다. bind
는 타이머가 만료 될 때 컴파일 및 실행되는 함수 대신 문자열을 포함시킬 수있는 대체 구문입니다. -
setTimeout 는 함수 호출이 지연되어야하는 밀리 초의 수입니다. 생략하면 기본값은 0입니다. clearTimeout
, ...,
는 에 의해 지정된 함수로 전달되는 다른 매개 변수입니다.
setTimeout
참고 : 정사각형 브래킷
선택적 매개 변수를 나타냅니다.
및 function greet() {
console.log('Howdy!');
}
setTimeout(greet, 2000);로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
때로는 구문에 가 포함되어 있음을 알 수 있습니다. 이게 왜? window.setTimeout
브라우저에서 코드를 실행할 때
는 Global <🎜 객체를 참조합니다. 및 scope 동일한 함수를 참조하십시오. 유일한 차이점은 두 번째 문서에서 window 메소드를 setTimeout 객체의 특성이라고합니다. window.setTimeout
<,> 내 생각에, 이것은 복잡성을 더하지만 혜택은 최소화됩니다. 먼저 찾을 수 있고 스코프 체인에서 반환되는 또 다른 메소드를 정의하면 걱정할 큰 문제가있을 수 있습니다. setTimeout
이 튜토리얼에서는 window를 생략하지만 결국에는 어떤 구문을 선택하는지입니다.
<<> 메서드 사용 예 <🎜 🎜>
이 메소드는 기능 참조를 첫 번째 매개 변수로 받아들입니다. setTimeout
이것은 함수의 이름 일 수 있습니다
함수를 참조하는 변수 (함수 표현식) : <🎜 🎜>
또는 익명 함수 : <🎜 🎜>
window
위에서 언급 한 바와 같이, 실행을 위해 코드 문자열을
로 전달할 수도 있습니다.
그러나 이것은 다음과 같은 이유로 권장되지 않습니다.
setTimeout
<(> 읽기가 어렵습니다 (따라서 유지 관리 및/또는 디버그).
는 잠재적 인 보안 위험 인 암시 적 를 사용합니다. setTimeout
JS 통역사를 호출해야하기 때문에 대안보다 느립니다.
전달 매개 변수를
<🎜 🎜>로 전달합니다
기본 시나리오에서 선호하는 크로스 브라우저 메소드는 익명 함수를 첫 번째 매개 변수로 사용하여 function greet() {
console.log('Howdy!');
}
setTimeout(greet, 2000);로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
다음 예에서는
배열에서 임의의 동물을 선택 하고이 임의 동물을 <🎜 🎜> 함수로 매개 변수로 전달합니다. 그런 다음 는 1 초의 지연으로 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])
로그인 후 복사
로그인 후 복사
<🎜 🎜> <<> 참고 : 정기적 인 함수 (<🎜 🎜>)를 사용하여 배열에서 임의의 요소를 반환했습니다. 화살표 함수를 사용하여 함수 표현식으로 쓸 수도 있습니다.
우리는 다음 섹션에서 화살표 기능을 소개합니다. 다음은 위의 코드를 포함하는 코드펜입니다 (출력을보기 위해 콘솔을 열어야 함). function greet() {
alert('Howdy!');
}
setTimeout(greet, 2000);로그인 후 복사
로그인 후 복사
대체 방법 <🎜 🎜>
기사의 상단에있는 구문에서 <🎜 🎜>에 의해 실행 된 콜백 함수로 매개 변수를 전달하는 두 번째 방법이 있음을 알 수 있습니다. 여기에는 지연 후 매개 변수를 나열하는 것이 포함됩니다. setTimeout
우리의 이전 예를 참조하십시오. 이것은 우리에게 줄 것입니다 : </p>
<pre class='brush:php;toolbar:false;'>const greet = function() {
alert('Howdy!');
};
setTimeout(greet, 2000);로그인 후 복사
불행히도, 이것은 IE9 이하에서 작동하지 않으며, 여기서 매개 변수는 로 전달됩니다. 불행히도 IE9에 대한 지원이 필요하다면 MDN에 폴리 필이 제공됩니다.
<🎜 🎜> <<> 키워드 질문 <🎜 🎜>실행 된 코드는 호출하는 함수와 다른 실행 컨텍스트에서 실행됩니다. 키워드의 컨텍스트가 중요 할 때 문제가됩니다.
이 출력의 이유는 첫 번째 예에서 <🎜 🎜>가 setTimeout 객체를 가리키고 두 번째 예에서 this가 글로벌 <🎜 객체를 가리키기 때문입니다 (
속성이 없습니다. ). function greet() {
console.log('Howdy!');
}
setTimeout(greet, 2000);로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
this의 값의 설명 설정
<🎜 🎜> 메소드를 사용하여 새 함수를 생성 할 수 있으며 호출되면 <🎜 🎜> 키워드가 제공된 값 (이 경우 dog 객체)으로 설정됩니다. 이것은 우리에게 줄 것입니다 :
this
window 사용자 라이브러리 <🎜 🎜 sound
많은 라이브러리에는이 문제를 해결하기 위해 내장 기능이 제공됩니다. 예를 들어, jquery의 <<> 방법입니다. 함수를 받아들이고 항상 특정 컨텍스트를 갖는 새로운 함수를 반환합니다. 이 경우에는 다음과 같습니다.
에서 화살표 기능을 사용하십시오
화살표 함수는 ES6에 도입되었습니다. 일반 기능의 구문보다 훨씬 짧습니다.
물론 는 <🎜 🎜>와 함께 사용할 수 있지만, 한 가지 주목할 사항 - 화살표 함수에는 고유 한 this 값이 없습니다. 대신, 그들은 동봉 된 어휘 컨텍스트의
위 내용은 Settimeout JavaScript 기능 : 예제가있는 안내서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
