settimeout ()
settimeout () 메소드는 지정된 밀리 초 후에 함수 또는 문자열이 실행되도록 지정하는 데 사용됩니다. 타이머 번호를 나타내는 정수를 반환합니다.이 기능의 실행을 취소하기 위해 Cleartimeout ()로 전달할 수 있습니다.
다음 코드에서 콘솔은 먼저 1000ms 후에, 즉 1s, 즉 타이머 settimeout () 메소드의 반환 값이 출력됩니다.
var timer = settimeout (function () {console.log (timer);}, 1000); console.log (0);문자열 매개 변수로도 쓸 수도 있습니다. 이 양식으로 인해 JavaScript 엔진이 두 번 구문 분석되어 성능을 줄이기 때문에 사용하는 것이 좋습니다.
var timer = settimeout ( 'console.log (타이머);', 1000); console.log (0);
Settimeout의 두 번째 매개 변수가 생략되면 매개 변수 기본값은 0
다음 코드에서는 콘솔에 0과 1이 나타나지만 0은 앞쪽에 있으며이 질문은 나중에 설명됩니다.
var timer = settimeout (function () {console.log (timer);}); console.log (0);실제로, 첫 두 매개 변수 외에도 settimeout () 메소드를 사용하면 더 많은 매개 변수를 추가 할 수 있으며, 이는 타이머의 함수로 전달됩니다.
다음 코드에서는 콘솔이 약 1000ms, 즉 1s 후 2를 출력합니다. 그러나 IE9-Browser는 Settimeout에 두 개의 매개 변수를 가질 수있게하며 더 많은 매개 변수를 지원하지 않습니다. NAN은 콘솔에서 출력됩니다.
settimeout (function (a, b) {console.log (a+b);}, 1000,1,1);IEIFE 매개 변수 전송을 사용하여 IE9-Browser 기능 매개 변수 전송과 호환됩니다.
settimeout ((함수 (a, b) {return function () {console.log (a+b);}}) (1,1), 1000);또는 타이머 외부에 함수를 작성한 다음 타이머의 익명 함수의 매개 변수로 함수가 호출됩니다.
함수 테스트 (a, b) {console.log (a+b);} settimeout (function () {test (1,1);}, 1000);이것은 다음을 가리킨다
이 메커니즘에 의해 지적 된 4 가지 바인딩 규칙은이 시리즈에서 자세히 도입되었습니다. 타이머에서 이것을 암시 적으로 손실하고 오류가 발생하기 쉽기 때문에 여기에서 다시 설명 될 것입니다.
var a = 0; function foo () {console.log (this.a);}; var obj = {a : 2, foo} settimeout (obj.foo, 100); // 0 // var a = 0에 해당합니다.OBJ 객체에서 속성 값을 얻으려면 OBJ.Foo 함수를 암시 적 바인딩을 위해 타이머의 익명 함수에 배치 할 수 있습니다.
var a = 0; function foo () {console.log (this.a);}; var obj = {a : 2, foo} settimeout (function () {obj.foo ();}, 100); // 2또는 bind 메소드를 사용하여 foo () 메소드 의이 바인드를 OBJ에 바인딩 할 수 있습니다.
var a = 0; funture foo () {console.log (this.a);}; var obj = {a : 2, foo : foo} settimeout (obj.foo.bind (obj), 100; // 2클리어 타임 아웃 ()
Settimeout 함수는 카운터 번호를 나타내는 정수 값을 반환하고 정수를 Cleartimeout 함수로 전달하여 해당 타이머를 취소합니다.
// 100ms 후, 콘솔은 settimeout () 메소드의 리턴 값을 출력합니다.
따라서이 값은 해당 타이머를 취소하는 데 사용할 수 있습니다.
var timer = settimeout (function () {console.log (타이머);}, 100); 클리어 타임 아웃 (타이머);또는 반환 값을 매개 변수로 직접 사용하십시오
var timer = settimeout (function () {console.log (타이머);}, 100); 클리어 타임 아웃 (1);일반적으로 Settimeout에 의해 리턴되는 정수 값은 연속적입니다. 즉, 두 번째 Settimeout 방법에 의해 리턴 된 정수 값은 첫 번째 정수 값보다 1이 더 큽니다.
// 콘솔 출력 1, 2, 3var timer1 = settimeout (function () {console.log (timer1);}, 100); var timer2 = settimeout (function () {console.log (timer2);}, 100); var timer3 = settimeout (function () {console.log (timer3), 100);setInterval ()
SetInterval의 사용은 Settimeout과 정확히 동일합니다. 유일한 차이점은 SetInterval이 작업이 한 번에 한 번씩 실행되도록 지정한다는 것입니다.
<button id = "btn"> 0 </button> <cript> var timer = setInterval (function () {btn.innerhtml = number (btn.innerhtml) + 1;}, 1000); btn.onclick = function () {clearinterval (timer); btn.innerhtml = 0;}}[참고] HTML5 표준은 설정 타임 아웃의 가장 짧은 시간 간격이 4 밀리 초임을 규정하고 있습니다. SetInterval의 가장 짧은 간격은 10 밀리 초입니다. 즉, 10 밀리 초 미만의 시간 간격은 10 밀리 초로 조정됩니다.
대부분의 컴퓨터 모니터의 새로 고침 빈도는 60Hz이며, 이는 초당 60 회 다시 페인트하는 것과 거의 같습니다. 따라서 가장 부드러운 애니메이션 효과의 최적 루프 간격은 1000ms/60이며 이는 대략 16.6ms입니다.
전력을 절약하기 위해 브라우저는 현재 창에없는 페이지의 경우 시간 간격을 1000 밀리 초로 확장합니다. 또한 노트북이 배터리 전원으로 구동되는 경우 Chrome 및 IE 9 이상이 시간 간격을 시스템 타이머로 전환합니다.
작동 메커니즘
질문의 이전 부분을 설명해 봅시다. 왜 0이 아래 코드의 콘솔 결과에서 1 앞에 나타나는가?
settimeout (function () {console.log (1);}); console.log (0);실제로 Settimeout의 두 번째 매개 변수를 0S로 설정하는 것은 기능을 즉시 실행하는 것이 아니라 함수를 코드 큐에 넣는 것을 의미합니다.
다음 예에서는 이벤트 핸들러가 버튼 BTN으로 설정됩니다. 이벤트 핸들러는 250ms 이후에 호출 할 타이머를 설정합니다. 이 버튼을 클릭 한 후 먼저 OnClick 이벤트 핸들러를 큐에 추가하십시오. 프로그램이 실행 된 후 타이머가 설정됩니다. 250ms 후 지정된 코드가 큐에 추가되어 실행을 기다립니다.
btn.onclick = function () {settimeout (function () {console.log (1);}, 250);}위 코드의 OnClick 이벤트 핸들러가 300ms에 대해 실행 된 경우 타이머 코드는 타이머를 설정 한 후 300ms 이상 실행해야합니다. 대기열의 모든 코드는 큐에 추가되는 방법에 관계없이 JavaScript 프로세스가 유휴 상태 일 때까지 기다려야합니다.
그림에서 볼 수 있듯이 타이머 코드는 255ms로 추가되었지만 OnClick 이벤트 핸들러가 여전히 실행 중이기 때문에 현재 실행할 수 없습니다. 최초의 타이머 코드는 300ms입니다. 즉, Onclick 이벤트 핸들러가 완료된 후
SetInterval 문제
SetInterVal ()을 사용하는 데있어 문제는 코드가 큐에 다시 추가되기 전에 타이머 코드가 실행되지 않았기 때문에 타이머 코드가 한 번에 일시 중지없이 여러 번 실행됩니다. JavaScript 엔진 의이 문제에 대한 해결책은 setInterval ()을 사용할 때 큐에 타이머 코드를 추가하는 것입니다. 이렇게하면 타이머 코드를 큐에 추가 할 수있는 최소 시간 간격이 지정된 간격입니다.
그러나 이것은 두 가지 문제로 이어질 수 있습니다. 1. 일부 간격이 건너 뜁니다. 2. 여러 타이머의 코드 실행 간격이 예상보다 작을 수 있습니다.
특정 onclick 이벤트 핸들러가 serinterval ()을 사용하여 200ms 간격 타이머를 설정한다고 가정합니다. 이벤트 핸들러가 300ms 이상을 완료하는 데 300ms 이상이 걸리고 타이머 코드도 거의 동시에 시간이 걸리면 특정 간격이 동시에 건너 뜁니다.
예제의 첫 번째 타이머는 205ms에서 큐에 추가되지만 300ms가 통과 될 때까지 실행할 수 없습니다. 이 타이머 코드가 실행되면 405ms의 큐에 다른 사본이 추가됩니다. 다음 간격으로 605ms에서는 첫 번째 타이머 코드가 여전히 실행 중이며 이미 큐에 타이머 코드 인스턴스가 있습니다. 결과적 으로이 시점의 타이머 코드는 큐에 추가되지 않습니다.
Settimeout을 반복하십시오
setInterval () 타이머의 문제를 피하려면 Chained Settimeout () 호출을 사용할 수 있습니다.
settimeout (function fn () {settimeout (fn, interval);}, interval);이 패턴 체인은 settimeout ()을 호출하고 함수가 실행될 때마다 새 타이머가 생성됩니다. 두 번째 settimeout ()는 현재 실행 된 함수를 호출하고 다른 타이머를 설정합니다. 이것의 장점은 이전 타이머 코드가 실행될 때까지 새 타이머 코드가 큐에 삽입되지 않아 간격이 누락되지 않도록하는 것입니다. 또한 다음 타이머 코드가 실행되기 전에 연속 작동을 피하기 위해 최소한 지정된 간격을 기다려야합니다.
setInterval () 사용
<div id = "mydiv"style = "높이 : 100px; 너비 : 100px; 배경색 : 핑크; 위치 : 절대; 왼쪽; 왼쪽 : 0;"> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div. false;} mydiv.style.left = parseint (mydiv.style.left) + 5 + 'px'; } </스크립트>
Chained Settimeout () 사용
<div id = "mydiv"style = "높이 : 100px; 너비 : 100px; 배경색 : 핑크; 위치 : 절대; 왼쪽 : 0;"> </div> </div> </div> <click = function () {settimeout () {if (parseint (mydiv.style.left) {settimeout (fn, 16);}; false;} mydiv.style.left = parseint (mydiv.style.left) + 5 + 'px'; } </스크립트>애플리케이션
타이머를 사용하여 일련의 이벤트를 조정하십시오
[1] 웹 개발에서, 이벤트는 자식 요소에서 먼저 발생 한 다음 부모 요소까지 거품이 발생합니다. 먼저 부모 요소의 이벤트 콜백 함수가 먼저 일어나도록하면 Settimeout (f, 0)을 사용해야합니다.
정상적인 상황에서는 div 요소를 클릭하고 먼저 0을 팝업 한 다음 팝업 1
<div id = "mydiv"style = "높이 : 100px; 너비 : 100px; 배경색; 핑크;"> </div> <cript> mydiv.onclick = function () {alert (0);} document.onclick = function () {alert (1);} </script>문서의 OnClick 이벤트가 먼저 발생하기를 원한다면, 즉 DIV 요소를 클릭하면 1이 먼저 나타나면 0이 팝업됩니다. 그런 다음 다음 설정을 만드십시오
<div id = "mydiv"style = "높이 : 100px; 너비 : 100px; 배경색 : 핑크;"> </div> <cript> mydiv.onclick = function () {settimeout () {alert (0);})} document.onclick = function () {alert (1);} </script>【2 -d 사용자 정의 콜백 함수는 일반적으로 브라우저의 기본 조치 전에 트리거됩니다. 예를 들어, 사용자가 입력 상자에 텍스트를 입력하면 브라우저가 텍스트를 수신하기 전에 키 프레스 이벤트가 트리거됩니다. 따라서 다음 콜백 기능은 목표를 달성 할 수 없습니다
<입력 유형 = "text"id = "myInput"> <cript> myInput.onKeypress = function (event) {this.value = this.value.toupperCase ();} </script>위의 코드는 사용자가 텍스트를 입력 한 직후 문자를 대문자로 변환하려고합니다. 그러나 실제로 브라우저가 현재 텍스트를받지 못했기 때문에 이전 문자를 대문자로 변환 할 수 있으므로 값은 최신 입력 문자를 얻을 수 없습니다.
Settimeout으로 다시 작성 하여만 위의 코드는 작동 할 수 있습니다.
<입력 유형 = "text"id = "myInput"> <cript> myInput.onKeypress = function (event) {settimeout (function () {myInput.value = myInput.value.toupperCase ();});} </script>코드는 여기서 끝납니다. 다음 기사에서 소개 할 것입니다
BOM 시리즈 : requestAnimationFrame
BOM 시리즈의 세 번째 타이머 응용 프로그램 (시계, 카운트 다운, 스톱워치 및 알람 시계)
위는 편집자가 소개 한 BOM 시리즈의 첫 번째 타이머 세트 타임 아웃 및 SetInterval입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!