지정된 자바스크립트 시간 간격으로 작업을 반복합니다. jQuery 함수 setTimeout()의 예

Window 및 Worker 인터페이스에서 제공되는 setInterval() 메서드는 각 호출 사이에 고정된 시간 지연을 두고 반복적으로 함수를 호출하거나 코드 조각을 실행합니다.

eval()을 사용하는 것과 같은 이유로 보안 위험이 발생합니다. 지연 지정된 함수나 코드 실행 사이에 타이머가 지연되어야 하는 시간(밀리초(천분의 1초))입니다. 허용되는 지연 값 범위에 대한 자세한 내용은 아래를 참조하세요. arg1, ..., argN 선택 사항 다음에 의해 지정된 함수에 전달되는 추가 인수입니다.

참고: 첫 번째 구문에서 setInterval()에 추가 인수를 전달하는 것은 다음에서 작동하지 않습니다.

인터넷 익스플로러

9 이전. 해당 브라우저에서 이 기능을 활성화하려면 폴리필을 사용해야 합니다(섹션 참조).

반환된 IntervalID는 setInterval() 호출로 생성된 타이머를 식별하는 0이 아닌 숫자 값입니다. 이 값을 전달하여 시간 초과를 취소할 수 있습니다.

Var IntervalID = window.setInterval(myCallback, 500, "매개변수 1", "매개변수 2"); function myCallback(a, b) ( // 여기에 코드를 입력하세요 // 매개변수는 순전히 선택사항입니다. console.log(a); console.log(b); )

다음 예제에서는 Stop 버튼을 누를 때까지 flashtext() 함수를 1초에 한 번씩 호출합니다.

setInterval/clearInterval 예 var nIntervId;

functionchangeColor() ( nIntervId = setInterval(flashText, 1000); ) function flashText() ( var oElem = document.getElementById("my_box"); oElem.style.color = oElem.style.color == "red" ? " blue" : "red"; // oElem.style.color == "red" ? "blue" : "red"는 삼항 연산자입니다. ) function stopTextColor() (clearInterval(nIntervId); )

예시 3: 타자기 시뮬레이션

다음 예제에서는 먼저 지정된 선택기 그룹과 일치하는 NodeList에 콘텐츠를 지운 다음 천천히 입력하여 타자기를 시뮬레이션합니다.< nPos) { return true; } var oRel, bExit = false; if (aMap.length === nPos) { aMap.push(0); } while (aMap < oSheet.parts.length) { oRel = oSheet.parts]; scroll(oRel, nPos + 1, bEraseAndStop) ? aMap++ : bExit = true; if (bEraseAndStop && (oRel.ref.nodeType - 1 | 1) === 3 && oRel.ref.nodeValue) { bExit = true; oCurrent = oRel.ref; sPart = oCurrent.nodeValue; oCurrent.nodeValue = ""; } oSheet.ref.appendChild(oRel.ref); if (bExit) { return false; } } aMap.length--; return true; } function typewrite () { if (sPart.length === 0 && scroll(aSheets, 0, true) && nIdx++ === aSheets.length - 1) { clean(); return; } oCurrent.nodeValue += sPart.charAt(0); sPart = sPart.slice(1); } function Sheet (oNode) { this.ref = oNode; if (!oNode.hasChildNodes()) { return; } this.parts = Array.prototype.slice.call(oNode.childNodes); for (var nChild = 0; nChild < this.parts.length; nChild++) { oNode.removeChild(this.parts); this.parts = new Sheet(this.parts); } } var nIntervId, oCurrent = null, bTyping = false, bStart = true, nIdx = 0, sPart = "", aSheets = , aMap = ; this.rate = nRate || 100; this.play = function () { if (bTyping) { return; } if (bStart) { var aItems = document.querySelectorAll(sSelector); if (aItems.length === 0) { return; } for (var nItem = 0; nItem < aItems.length; nItem++) { aSheets.push(new Sheet(aItems)); /* Uncomment the following line if you have previously hidden your elements via CSS: */ // aItems.style.visibility = "visible"; } bStart = false; } nIntervId = setInterval(typewrite, this.rate); bTyping = true; }; this.pause = function () { clearInterval(nIntervId); bTyping = false; }; this.terminate = function () { oCurrent.nodeValue += sPart; sPart = ""; for (nIdx; nIdx < aSheets.length; scroll(aSheets, 0, false)); clean(); }; } /* usage: */ var oTWExample1 = new Typewriter(/* elements: */ "#article, h1, #info, #copyleft", /* frame rate (optional): */ 15); /* default frame rate is 100: */ var oTWExample2 = new Typewriter("#controls"); /* you can also change the frame rate value modifying the "rate" property; for example: */ // oTWExample2.rate = 150; onload = function () { oTWExample1.play(); oTWExample2.play(); }; span.intLink, a, a:visited { cursor: pointer; color: #000000; text-decoration: underline; } #info { width: 180px; height: 150px; float: right; background-color: #eeeeff; padding: 4px; overflow: auto; font-size: 12px; margin: 4px; border-radius: 5px; /* visibility: hidden; */ }

JavaScript 타자기 - MDN 예제 함수 타자기(sSelector, nRate) ( 함수 clean() (clearInterval(nIntervId); bTyping = false; bStart = true; oCurrent = null; aSheets.length = nIdx = 0; ) 함수 스크롤(oSheet, nPos , bEraseAndStop) ( if (!oSheet.hasOwnProperty("parts") || aMap.length

Mozilla 개발자 네트워크의 CopyLeft 2012

Vivamus blandit Massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros conballis ut mollis magna pellentesque. lacus ultricies vitae facilisis nisi fringilla의 Pellentesque placerat enim입니다. 틴시던트 틴시던트 틴시던트에서.

자바스크립트 타자기
Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. 남 cursus lobortis placerat. Sed dui nisi, elementum eu soules ac, placerat sit amet mauris. Pellentesque dapibus Tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. 정수 ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut Massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas 전정 mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras Sodales Eleifend Interdum.

Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eutincidunt dolor eleifend sit amet. Ut nec velit in dolortincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aeneantincidunt risus ut nisi consectetur cursus. 당신의 이력서는 엘리트입니다. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis Malesuada accumsan dui, at fringilla mauris bibStartum quis. Cras adipiscing ultricies fermentum. Praesent bibStartum condimentum feugiat.

Nam faucibus, ligula eu fringilla pulvinar, lectustellus iaculis nunc, vitae scelerisque metus leo non metus. 프로인 마티스 로보티스 로보티스. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.

이전에 설명한 대로 Internet Explorer 버전 9 이하는 setTimeout() 또는 setInterval() 에서 콜백 함수에 인수 전달을 지원하지 않습니다. 다음 IE 관련 코드는 이러한 제한을 극복하는 방법을 보여줍니다. 사용하려면 스크립트 상단에 다음 코드를 추가하기만 하면 됩니다.

또 다른 가능성은 익명 함수를 사용하여 콜백을 호출하는 것입니다. 하지만 이 솔루션은 약간 더 비쌉니다. 예:

Var IntervalID = setInterval(function() ( myFunc("1", "2", "3"); ), 1000);

비활성 탭에는 Gecko 5.0 필요(Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)

"이것" 문제

설명

MyArray = ["0", "1", "2"]; myArray.myMethod = function (sProperty) ( Alert(arguments.length > 0 ? this : this); ); myArray.myMethod(); // "0,1,2"를 인쇄합니다. myArray.myMethod(1); // "1"을 인쇄합니다. setTimeout(myArray.myMethod, 1000); // 1초 후에 ""를 인쇄합니다. setTimeout(myArray.myMethod, 1500, "1"); // 1.5초 후에 "undefine"을 인쇄합니다. // .call을 사용하여 "this" 객체를 전달하면 작동하지 않습니다. // 이는 setTimeout 자체 내에서 this의 값을 변경하기 때문입니다. // myArray 내부에서 this의 값을 변경하려고 합니다. .myMethod // 실제로는 setTimeout 코드에서 이것이 윈도우 객체일 것으로 예상하기 때문에 오류가 발생합니다. setTimeout.call(myArray, myArray.myMethod, 2000); // 오류: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: WrappedNative 프로토타입 객체에 대한 잘못된 작업" setTimeout.call(myArray, myArray.myMethod, 2500, 2); // 동일한 오류

보시다시피 레거시 JavaScript에서는 이 개체를 콜백 함수에 전달할 수 있는 방법이 없습니다.

"이" 문제를 해결하는 가능한 방법은 두 개의 기본 setTimeout() 또는 setInterval() 전역 함수를 두 개로 바꾸는 것입니다. 비원어민 Function.prototype.call 메소드를 통해 호출을 활성화하는 것입니다. 다음 예에서는 가능한 대체 방법을 보여줍니다.

// JavaScript 타이머를 통해 "this" 개체의 전달을 활성화합니다. var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval; window.setTimeout = 함수 (vCallback, nDelay /*, 인수ToPass1, 인수ToPass2 등 */) ( var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2); return __nativeST__(vCallback 인스턴스of 함수 ? 함수 () ( vCallback.apply(oThis, aArgs); ) : vCallback, nDelay ); window.setInterval = 함수 (vCallback, nDelay /*, 인수ToPass1, 인수ToPass2 등 */) ( var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2); return __nativeSI__(vCallback 인스턴스of 함수 ? 함수 () ( vCallback.apply(oThis, aArgs); ) : vCallback, nDelay );

이 두 가지 대체 기능을 사용하면 IE 타이머의 콜백 함수에 임의 인수를 HTML5 표준으로 전달할 수도 있습니다. 그래서 그들은 다음과 같이 사용될 수 있습니다 비표준 준수폴리필도 마찬가지다. 다음을 참조하세요. 표준 준수폴리필.

새로운 기능 테스트:

MyArray = ["0", "1", "2"]; myArray.myMethod = function (sProperty) ( Alert(arguments.length > 0 ? this : this); ); setTimeout(alert, 1500, "안녕하세요!"); // setTimeout 및 setInterval의 표준 사용은 유지되지만... setTimeout.call(myArray, myArray.myMethod, 2000); // 2초 후에 "zero,one,two"를 인쇄합니다. setTimeout.call(myArray, myArray.myMethod, 2500, 2); // 2.5초 후에 "two"를 인쇄합니다.

좀 더 복잡하지만 여전히 모듈식 버전인 경우( 악마) JavaScript 데몬 관리를 참조하세요. 이 더 복잡한 버전은 대규모 확장 가능한 메서드 모음에 지나지 않습니다. 악마건설자. 그러나 악마생성자 자체는 다음의 복제본일 뿐입니다. 미니데몬추가 지원으로 초기화그리고 시작하다인스턴스화 중에 선언된 함수 악마. 그래서 미니데몬프레임워크는 간단한 애니메이션에 권장되는 방식으로 남아 있습니다. 악마메서드 컬렉션이 없으면 본질적으로 복제본입니다.

MiniDaemon은 콜백 함수에 인수를 전달합니다. 기본적으로 이 기능을 지원하지 않는 브라우저에서 작업하려면 위에 제안된 방법 중 하나를 사용하세요.

var myDaemon = 새로운 MiniDaemon( 이 개체, 콜백[ , 비율 [, 길이]]);

setInterval() 함수는 애니메이션과 같이 반복적으로 실행되는 기능에 대한 지연을 설정하는 데 일반적으로 사용됩니다. WindowOrWorkerGlobalScope.clearInterval() 을 사용하여 간격을 취소할 수 있습니다.

함수를 호출하고 싶다면 한 번지정된 지연 후에는 .

간격이 중첩될 수 있습니다. 즉, 첫 번째 간격이 계속 진행 중이더라도 setInterval()에 대한 콜백은 차례로 setInterval()을 호출하여 다른 간격 실행을 시작할 수 있습니다. 이것이 미칠 수 있는 잠재적인 영향을 완화하기 위해 성능상 간격이 5개 수준 이상으로 중첩되면 브라우저는 자동으로 간격에 대해 최소값 4ms를 적용합니다. setInterval()에 대한 깊게 중첩된 호출에서 4ms 미만의 값을 지정하려는 시도는 4ms로 고정됩니다.

브라우저는 특정 상황에서 간격에 대해 훨씬 더 엄격한 최소값을 적용할 수 있지만 이는 일반적이지는 않습니다. 또한 콜백 호출 사이에 경과되는 실제 시간은 지정된 지연보다 길 수 있습니다. 예를 보려면 WindowOrWorkerGlobalScope.setTimeout()에 지정된 것보다 지연 시간이 길어지는 이유를 참조하세요.

논리 실행 시간이 간격 시간보다 오래 걸릴 가능성이 있는 경우 setTimeout() 을 사용하여 명명된 함수를 재귀적으로 호출하는 것이 좋습니다. 예를 들어 setInterval()을 사용하여 5초마다 원격 서버를 폴링하는 경우 네트워크 대기 시간, 서버 응답 없음 및 기타 여러 문제로 인해 요청이 할당된 시간 내에 완료되지 못할 수 있습니다. 따라서 반드시 순서대로 반환되지는 않는 대기 중인 XHR 요청이 있을 수 있습니다.

스크립팅 언어로 프로그래밍할 때 주기적으로 일시 중지를 생성해야 합니다. 즉, 프로그램 실행을 잠시 일시 중지한 다음 작업을 계속해야 합니다. 예를 들어 VBS 및 PHP 스크립트에서는 다음 방법이 가능합니다.

VBS: wscript.sleep 1500(1.5초 동안 중지)

PHP: 수면(10); (10초 동안 정지)

이러한 일시 중지 동안 런타임 시스템(PHP 또는 VBS)은 아무것도 하지 않는다. Javascript에서 유사한 것을 직관적으로 사용하려는 개발자는 불쾌하게 놀랄 것입니다. 흔한 실수 Javascript에서 일시 중지를 만들려고 하면 다음과 같습니다.

함수 badtest() ( for (var i=1; i< 10; i++) { window.setTimeout("document.getElementById("test1").value += " + i, 900) } }

루프 중에 다음 숫자를 그릴 차례가 오면 setTimeout이 Javascript의 작동을 정직하게 중지하고 0.9초 동안 기다린 다음 원하는 숫자를 입력 필드 끝에 추가한 다음 작업을 계속할 것이라고 생각합니다. 그러나 실제로는 그렇지 않습니다. Javascript의 setInterval 및 setTimeout은 괄호 안에 지정된 작업(또는 함수)의 실행만 지연시킵니다. 이 예에서는 다음과 같은 일이 발생합니다.

즉시는 예를 들어 1ms를 의미합니다(즉, 900ms에 비해 불균형적으로 작음). 루프는 거의 즉시 작업을 수행하여 동일한 시점에서 여러 지연된 작업을 생성합니다. 이는 보류 중인 모든 "그리기" 작업이 새 번호를 추가하는 사이에 일시 중지 없이 거의 동시에 완료된다는 것을 의미합니다. 사이클이 시작됩니다. 모든 것이 0.9초 동안 정지됩니다. 그리고 shirr - 모든 숫자가 차례로 연속으로 촬영됩니다.

이러한 경우 setTimeout을 올바르게 적용하는 방법은 무엇입니까? 복잡해요. 함수를 호출해야 합니다. 재귀적으로(함수 내에서 동일한 함수), 이 프로세스가 끝이지 않도록 중지 조건(예: 인쇄할 숫자의 크기)을 설정합니다.

함수welltest() ( if (i< 9) { document.getElementById("test2").value += ++i window.setTimeout("welltest()", 400) } }

그리고 변수 i는 함수 외부에서 초기화되어야 합니다. 예를 들어 다음과 같습니다.

이제 모든 것이 정상적으로 작동합니다(지연 시간을 0.9초에서 0.4초로 줄였습니다). 그러나 이러한 작업의 경우 setTimeout 대신 setInterval을 사용하는 것이 더 논리적입니다(비록 두 가지 함수가 필요함).

함수 besttest() ( window.i = 0 window.timer1 = window.setInterval("draw()", 400) ) 함수 draw() ( document.getElementById("test3").value += ++i if (i >= 9) ClearInterval(window.timer1) )

Javascirpt setInterval 메소드의 특징은 "자체적으로" 전달되지 않고 특수한clearInterval 메소드를 사용하여 중지되어야 한다는 것입니다. 그리고 정확히 무엇을 중지해야 하는지 명확하게 하기 위해 지연된 작업에 대한 작업에는 특별한 식별자인 타이머가 할당됩니다: window.timer1 = window.setInterval(...) .

setTimeout 메소드로 생성된 작업에 식별자를 할당할 수도 있습니다. 모든 타이머 ID는 서로 달라야 합니다(현재 브라우저 창 내에서 고유해야 함). 그런 다음 창에서 지연된 작업을 사용하는 여러 가지 작업을 생성할 수 있으며 이러한 작업은 병렬로(컴퓨터에 리소스가 충분한 경우 일종의 동시 실행) 실행됩니다. 이는 기본적으로 PHP 또는 VBS에서는 불가능합니다.

다음은 여러 Javascript 타이머가 동시에 실행되는 페이지의 예입니다. setinterval.htm(setinterval.js 파일의 Javascript 함수). 메뉴를 제외한 모든 페이지 타이머는 Esc 키를 사용하여 중지할 수 있습니다. 모든 예제 타이머는 "자연스러운"(추상적인 i++가 아닌) 카운트다운(시간 또는 거리)을 기반으로 합니다. 모든 "시계"는 특별히 비동기화되어 있습니다(명확성을 위해). 거리에 따른 타이머는 "표시기"와 드롭다운("풀아웃") 메뉴에서 사용됩니다.

슬라이딩 메뉴는 실제로 (“헤더” 아래에서) 슬라이딩됩니다. 요소 사이에 특별히 간격이 남아 있어 어떻게 슬라이드 아웃되는지 확인할 수 있습니다. 예기치 않게 길이가 다른 목록에 대해 똑같이 원활하게 종료할 수 없다는 것이 밝혀졌습니다. 아마도 컴퓨터 성능(AMD Athlon 999MHz)이 낮기 때문일 것입니다.

아름다움과 조화를 위해서는 다양한 메뉴 항목의 목록이 동시에 나타나는 것이 필요하다는 것은 매우 분명합니다. 즉, 더 긴 목록은 더 많은 항목으로 인해 삭제되어야 합니다. 고속, 더 짧은 것-더 낮은 속도로. 다음과 같이 구현해도 될 것 같습니다.

이 논리에 따르면 드롭다운 목록의 높이가 200px인 경우 1ms마다 한 픽셀 아래로 이동해야 합니다. 그러나 이러한 속도는 우리 컴퓨터에서는 작동하지 않습니다. 브라우저는 1밀리초 안에 목록의 새 위치를 그릴 시간이 없습니다. 예. Javascript는 계산을 관리하지만(무엇을 계산해야 합니까?) 브라우저(Firefox)에는 표시할 시간이 없습니다. 웹의 일반적인 상황.

따라서 목발을 사용해야만 메뉴 출발 시간을 어느 정도 균등화할 수 있으며, 이것이 더 많은 경우에 어떻게 작동할지는 아직 불분명합니다. 빠른 컴퓨터. 하지만 우리는 가장 느린 것을 믿어야 합니다. 그렇죠? 컴퓨터 속도를 고려하지 않은 알고리즘은 다음과 같이 나타납니다.

이제 목록이 어느 정도 나오고 있습니다. 다소 비슷한 시간 동안. setinterval.htm 페이지에서.

그리고 브루스가 온다:

함수 Slide_do(obj, maxtop, offset) ( if (getTopLeft(obj).top< maxtop) { obj.style.top = getTopLeft(obj).top + offset } else { if (obj && obj.timer1) { clearInterval(obj.timer1) obj.timer1 = null } } }

우리가 볼 수 있듯이 중첩된 목록을 메뉴 밖으로 밀어내는 함수 자체는 매우 간단합니다. 남은 것은 다음과 같은 줄로 실행하는 것뿐입니다.

Ts.timer1 = setInterval(function())(slide_do(ts, maxtop, offset)), 지연)

글쎄, 시작하기 전에 이러한 모든 maxtop과 offset을 계산하고 목록을 mintop 위치에 배치하십시오. 이것이 40줄의 "예비" Slide() 함수가 수행하는 작업입니다. 그리고 모두 함께 - setinterval.js 파일에 있습니다. 예, 그리고 이 쓰레기는 포함된 스타일 파일 없이는 전혀 작동하지 않습니다.

JavaScript 타이머의 작동 방식을 이해하는 것은 매우 중요합니다. 종종 이들의 동작은 멀티스레딩에 대한 우리의 직관적인 이해와 일치하지 않으며 이는 실제로 단일 스레드에서 실행된다는 사실 때문입니다. 타이머를 관리할 수 있는 네 가지 기능을 살펴보겠습니다.

• var id = setTimeout(fn, 지연); - 주어진 지연 후에 주어진 함수를 호출하는 간단한 타이머를 만듭니다. 이 함수는 타이머를 일시 중지할 수 있는 고유 ID를 반환합니다.
• var id = setInterval(fn, 지연); - setTimeout과 유사하지만 지정된 간격으로(중지될 때까지) 지속적으로 함수를 호출합니다.
• clearInterval(id);,clearTimeout(id); - 타이머 ID(위에 설명된 함수 중 하나에 의해 반환됨)를 수락하고 콜백 실행을 중지합니다."a.

이 그림에는 알아야 할 정보가 상당히 많지만 이를 이해하면 JavaScript 비동기 작동 방식을 더 깊이 이해할 수 있습니다. 이 차트는 수직으로 시간을 밀리초 단위로 나타내며, 파란색 블록은 실행된 JavaScript 코드 블록을 나타냅니다. 예를 들어, 첫 번째 블록은 평균 18ms 동안 실행되고, 마우스 클릭은 약 11ms 동안 실행을 차단합니다.

JavaScript는 단일 스레드 실행 특성으로 인해 하나의 코드 덩어리만 실행할 수 있으며, 각 코드는 다른 비동기 이벤트의 실행을 차단합니다. 이는 비동기 이벤트(예: 마우스 클릭, 타이머 호출 또는 XMLHttp 요청 완료)가 발생하면 대기열에 추가되고 나중에 실행된다는 의미입니다(구현은 브라우저에 따라 다르지만, 이에 동의합니다). 이를 "큐"라고 부릅니다).

우선 JavaScript 블록 내에서 두 개의 타이머(10ms 지연의 setTimeout 및 동일한 지연의 setInterval)가 시작된다고 가정해 보겠습니다. 타이머가 시작되는 시점에 따라 첫 번째 코드 블록이 아직 완료되지 않은 순간에 타이머가 실행됩니다. 그러나 즉시 실행되지는 않습니다(단일 스레딩으로 인해 가능하지 않음). 대신, 지연된 함수는 대기열에 추가되어 다음 사용 가능한 순간에 실행됩니다.

또한 첫 번째 JavaScript 블록을 실행하는 동안 마우스 클릭이 발생합니다. 이 비동기 이벤트에 대한 핸들러(예측할 수 없기 때문에 비동기적임)는 현재 직접 실행할 수 없으므로 타이머처럼 대기열에 들어가게 됩니다.

JavaScript 코드의 첫 번째 블록이 실행된 후 브라우저는 "무엇이 실행되기를 기다리고 있습니까?"라는 질문을 합니다. 안에 이 경우마우스 클릭 핸들러와 타이머가 보류 상태입니다. 브라우저는 그 중 하나(클릭 핸들러)를 선택하고 실행합니다. 타이머는 실행 대기열에서 사용 가능한 다음 시간을 기다립니다.

마우스 클릭 핸들러가 실행되는 동안 첫 번째 간격 콜백이 실행됩니다. 타이머 콜백과 마찬가지로 대기열에 추가됩니다. 그러나 간격이 다시 실행되면(타이머 콜백이 실행되는 동안) 대기열에서 제거됩니다. 많은 양의 코드가 실행되는 동안 모든 간격 콜백이 대기열에 추가되면 실행이 완료되는 사이에 지연 시간 없이 여러 함수가 호출되기를 기다리게 됩니다. 대신 브라우저는 더 이상 함수가 없을 때까지 기다리는 경향이 있습니다. 대기열에 다른 항목을 추가하기 전에 대기열에 남아 있습니다.

따라서 간격 콜백의 세 번째 실행이 이미 실행되는 순간과 일치하는 경우를 관찰할 수 있습니다. 이는 중요한 점을 보여줍니다. 간격은 현재 실행 중인 내용에 상관하지 않으며 실행 간의 지연 기간에 관계없이 대기열에 추가됩니다.

마지막으로 두 번째 간격 콜백이 완료된 후 JavaScript 엔진이 실행할 작업이 남아 있지 않음을 알 수 있습니다. 즉, 브라우저는 새로운 비동기 이벤트가 발생할 때까지 다시 기다립니다. 이는 간격 콜백이 다시 작동하는 50ms 지점에서 발생합니다. 이 시점에서는 차단할 것이 없으므로 즉시 작동합니다.

setTimeout과 setInterval의 차이점을 잘 보여주는 예를 살펴보겠습니다.
setTimeout(function())( /* 긴 코드 블록... */ setTimeout(arguments.callee, 10); ), 10);
setInterval(function())( /* 긴 코드 블록... */ ), 10);

이 두 가지 옵션은 언뜻 보면 동일하지만 실제로는 그렇지 않습니다. setTimeout을 사용하는 코드는 이전 호출 이후 항상 최소 10ms의 지연을 갖는 반면(더 클 수는 있지만 더 작을 수는 없음), setInterval을 사용하는 코드는 이전 호출이 발생한 시점에 관계없이 10ms마다 호출되는 경향이 있습니다.
위에서 말한 모든 내용을 요약해 보겠습니다.
- setTimeout 및 setInterval 함수는 비동기 코드에서 근본적으로 다르게 실행됩니다.
- 타이머를 실행할 수 없는 경우 지금은, 다음 실행 지점까지 지연됩니다(원하는 지연보다 길어짐).
- 간격(setInterval)은 실행이 지정된 지연보다 오래 걸리는 경우 지연 없이 차례로 실행될 수 있습니다.

이 모든 것은 극도로 중요한 정보개발을 위해. 특히 많은 비동기 이벤트(종종 발생함)에서 JavaScript 엔진이 작동하는 방식을 아는 것은 고급 애플리케이션을 구축하기 위한 훌륭한 기반을 마련합니다.

출처: http://learn.javascript.ru/settimeout-setinterval

거의 모든 JavaScript 구현에는 지정된 시간 후에 함수가 호출되도록 예약할 수 있는 내부 타이머 스케줄러가 있습니다.

특히 이 기능은 브라우저와 Node.JS 서버에서 지원됩니다.

통사론:

매개변수:

• 기능/코드
  • 실행될 함수 또는 코드 줄입니다.
  • 문자열은 호환성을 위해 유지되므로 권장되지 않습니다.
• 기능
  • 지연 시간(밀리초), 1000밀리초는 1초와 같습니다.
• 인수1, 인수2…
  • 함수에 전달할 인수입니다. IE9-에서는 지원되지 않습니다.
  • 이 함수는 지연 매개변수에 지정된 시간 이후에 실행됩니다.

예를 들어, 다음 코드는 1초 후에 Alert("Hello")를 트리거합니다.

첫 번째 인수가 문자열이면 인터프리터는 해당 문자열에서 익명 함수를 만듭니다.

즉, 이 항목은 정확히 동일하게 작동합니다.

SetTimeout("alert("안녕하세요")" , 1000 );

대신 익명 함수를 사용하세요.

SetTimeout(function () ( Alert("안녕하세요" ) ), 1000 );

전체적으로 최신 브라우저 IE10에서는 setTimeout을 사용하여 함수 매개변수를 지정할 수 있습니다.

아래 예는 IE9를 제외한 모든 곳에서 "Hello, I'm Vasya"를 출력합니다.

...그러나 대부분의 경우 이전 IE의 지원이 필요하며 인수 지정을 허용하지 않습니다. 따라서 이를 전송하기 위해 호출을 익명 함수로 래핑합니다.

setTimeout을 호출하면 this 컨텍스트가 전달되지 않습니다.

특히, setTimeout을 통해 객체 메소드를 호출하면 전역 컨텍스트에서 작동합니다. 이로 인해 잘못된 결과가 발생할 수 있습니다.

예를 들어, 1초 후에 user.sayHi()를 호출해 보겠습니다.

setTimeout은 전역 컨텍스트에서 user.sayHi 함수를 실행하므로 this를 통해 객체에 액세스할 수 없습니다.

즉, setTimeout에 대한 두 호출은 동일한 작업을 수행합니다.

다행히도 이 문제는 중간 함수를 생성하여 쉽게 해결할 수도 있습니다.

래퍼 함수는 브라우저 간에 인수를 전달하고 실행 컨텍스트를 보존하는 데 사용됩니다.

setTimeout 함수는 작업을 취소하는 데 사용할 수 있는 타이머Id를 반환합니다.

통사론:

ClearTimeout(timerId)

다음 예에서는 시간 제한을 설정한 다음 삭제합니다(마음이 바뀌었습니다). 결과적으로 아무 일도 일어나지 않습니다.

setInterval 메소드는 setTimeout과 유사한 구문을 갖습니다.

논쟁의 의미는 동일합니다. 하지만 setTimeout 과 달리 함수를 한 번 실행하지 않고 지정된 시간 간격으로 정기적으로 반복합니다. 다음을 호출하여 실행을 중지할 수 있습니다.

ClearInterval(timerId)

다음 예제는 실행 시 중지 버튼을 클릭할 때까지 2초마다 메시지를 표시합니다.

var 타이머 = setInterval(function () ( 경고(i++) ), 2000 );

setInterval에서 호출 대기 및 오버레이

setInterval(function, Delay) 호출은 지정된 시간 간격으로 함수가 실행되도록 합니다. 그러나 여기에는 미묘함이 있습니다.

실제로 통화 사이의 일시 중지는 지정된 간격보다 짧습니다.

즉, 브라우저는 함수 자체의 실행 시간을 고려하지 않고 100ms마다 깔끔하게 함수 실행을 시작합니다.

함수 실행이 지연보다 오래 걸리는 경우가 있습니다. 예를 들어, 함수는 복잡하지만 지연은 작습니다. 또는 함수에 실행 스레드를 차단하는 경고/확인/프롬프트 문이 포함되어 있습니다. 여기서부터 상황이 흥미로워지기 시작합니다.

브라우저가 사용 중이어서 기능을 시작할 수 없는 경우 해당 기능은 대기열에 추가되어 브라우저가 사용 가능해지면 즉시 실행됩니다.

아래 이미지는 실행하는 데 오랜 시간이 걸리는 함수에서 어떤 일이 발생하는지 보여줍니다.

setInterval에 의해 시작된 함수 호출은 대기열에 추가되고 가능한 경우 즉시 발생합니다.

두 번째 기능 실행은 첫 번째 실행이 끝난 직후에 발생합니다.

실행은 두 번 이상 대기열에 추가되지 않습니다.

함수가 예약된 여러 실행보다 실행하는 데 시간이 더 오래 걸리는 경우에도 한 번만 대기열에 추가됩니다. 따라서 출시의 "축적"이 없습니다.

아래 이미지에서 setInterval은 200ms 내에 함수 실행을 시도하고 호출을 대기열에 넣습니다. 300ms와 400ms에 타이머가 다시 작동하지만 아무 일도 일어나지 않습니다.

setInterval(function, Delay)을 호출한다고 해서 실행 사이의 실제 지연이 보장되는 것은 아닙니다.

실제 지연이 지정된 지연보다 크거나 작은 경우가 있습니다. 일반적으로 적어도 약간의 지연이 있을 것이라는 것은 사실이 아닙니다.

정기적인 반복뿐만 아니라 실행 사이의 지연이 필요한 경우에는 함수가 실행될 때마다 setTimeout을 사용하여 재설정합니다.

아래는 2초 간격으로 경고를 발행하는 예입니다.

var 타이머 = setTimeout(function run () ( Alert(i++); 타이머 = setTimeout(run, 2000 ); ), 2000 );

최소 타이머 지연

브라우저 타이머의 대기 시간은 가장 낮습니다. 최신 브라우저에서는 대략 0에서 4ms까지 다양합니다. 오래된 것에서는 더 길어지고 15ms에 도달할 수 있습니다.

표준에 따르면 최소 지연은 4ms입니다. 따라서 setTimeout(..,1) 과 setTimeout(..,4) 사이에는 차이가 없습니다.

트리거링 빈도는 훨씬 낮을 수 있습니다. 어떤 경우에는 지연이 4ms가 아니라 30ms 또는 심지어 1000ms일 수도 있습니다.

대부분의 브라우저(주로 데스크톱 브라우저)는 탭이 비활성화된 경우에도 setTimeout / setInterval을 계속 실행합니다. 동시에 다수(Chrome, FF, IE10)에서는 최소 타이머 빈도를 초당 1회로 줄입니다. 타이머는 "백그라운드" 탭에서 작동하지만 거의 작동하지 않는 것으로 나타났습니다.

노트북에서 배터리 전원으로 실행되는 경우 브라우저는 빈도를 줄여 코드 실행 빈도를 줄이고 배터리 전원을 절약할 수도 있습니다. IE는 특히 이것으로 유명합니다. 설정에 따라 감소가 여러 번 이루어질 수 있습니다. CPU 부하가 너무 높으면 JavaScript가 타이머를 적시에 처리하지 못할 수 있습니다. 이렇게 하면 일부 setInterval 실행을 건너뜁니다.

결론: 4ms의 주파수는 집중할 가치가 있지만 너무 기대해서는 안 됩니다.

콘솔에 간격 출력 호출 사이의 시간 간격을 계산하는 코드는 다음과 같습니다.

이 트릭은 JavaScript 해킹의 역사에 남을 만한 가치가 있습니다.

현재 스크립트가 끝난 후 함수를 실행하려는 경우 함수는 setTimeout(func, 0)으로 래핑됩니다.

문제는 setTimeout이 함수를 즉시 실행하지 않는다는 것입니다. 그는 단지 구현을 계획하고 있습니다. 그러나 JavaScript 인터프리터는 현재 스크립트가 실행된 후에만 계획된 기능을 수행하기 시작합니다.

표준에 따르면 setTimeout은 어쨌든 지연이 0인 함수를 실행할 수 없습니다. 앞서 말했듯이 지연은 일반적으로 4ms입니다. 그러나 여기서 가장 중요한 것은 어떤 경우에도 현재 코드가 실행된 후에 실행이 발생한다는 것입니다.

예를 들어:

setInterval(func, Delay) 및 setTimeout(func, Delay) 메소드를 사용하면 func를 정기적으로/지연 밀리초마다 한 번씩 실행할 수 있습니다.

두 메서드 모두 타이머 ID를 반환합니다. clearInterval/clearTimeout을 호출하여 실행을 중지하는 데 사용됩니다.

| | 세트간격 | 설정시간 초과 | || ----------- | ---------- | | 타이밍 | 통화는 엄격하게 타이머에 맞춰 진행됩니다. 통역사가 통화 중인 경우 통화 한 통이 대기됩니다. 함수 실행 시간은 고려되지 않으므로 한 실행이 끝난 후 다른 실행이 시작될 때까지의 시간 간격이 다를 수 있습니다. | 실행 사이에 고정된 일시 중지가 필요한 setInterval 대신 setTimeout에 대한 재귀 호출이 사용됩니다. | | 지연 | 최소 지연: 4ms. | 최소 지연: 4ms. | | 브라우저 기능 | 지연 시간 0은 IE에서 작동하지 않습니다. Opera에서 제로 대기 시간은 4ms에 해당하며 비표준 1ms, 2ms 및 3ms를 포함한 기타 지연은 정확하게 처리됩니다. |