set Timeout 또는 set Interval?
제가 알기로는, 이 두 개의 Javascript는 똑같이 동작합니다.
옵션 A:
function myTimeoutFunction()
{
doStuff();
setTimeout(myTimeoutFunction, 1000);
}
myTimeoutFunction();
옵션 B:
function myTimeoutFunction()
{
doStuff();
}
myTimeoutFunction();
setInterval(myTimeoutFunction, 1000);
setTimeout과 setInterval의 사용에는 차이가 있습니까?
것을 , 이 경우는 것을 하려고 .setInterval이 더 setTimeout 「」이래, 「」이래의setTimeout는 1000ms를 대기하고 함수를 실행한 후 다른 타임아웃을 설정합니다.따라서 대기 시간은 실제로 1000ms를 조금 초과합니다(또는 함수의 실행에 시간이 오래 걸리는 경우 훨씬 더 깁니다).
라고 할 수도 setInterval1000밀리초마다 정확하게 실행됩니다.setInterval또한 JavaScript는 멀티 스레드 언어가 아니기 때문에 스크립트의 다른 부분이 실행 중일 경우 인터벌은 종료될 때까지 기다려야 합니다.
이 바이올린에서는 타임아웃이 늦어지는 것을 명확하게 알 수 있지만 인터벌은 거의 항상 1콜/초(스크립트가 시도하고 있습니다)로 되어 있습니다.상단의 속도 변수를 20과 같은 작은 값으로 변경하면(즉, 초당 50회 실행이 시도됨) 간격은 평균 초당 50회까지 도달하지 않습니다.
지연은 거의 무시해도 되지만, 매우 정확한 것을 프로그래밍하고 있는 경우는, 자기 조정 타이머(본질적으로 타임 아웃 베이스의 타이머로, 생성되는 지연에 대해서 항상 스스로 조정)를 선택할 필요가 있습니다.
차이가 있나요?
네. 타임아웃은 setTimeout()이 호출된 후 일정 시간 동안 실행됩니다.인터벌은 이전 인터벌이 실행된 후 일정 시간 동안 실행됩니다.
가 실행되는데 이 좀 걸리면 를 알 수.를 들어set에 setTimeout/set은 with " 입니다.. 의한 , 「」/「」* 시 "JavaScript" 를 사용합니다.[-----]츠키다
Timeout:
. * . * . * . * .
[--] [--] [--] [--]
Interval:
. * * * * * *
[--] [--] [--] [--] [--] [--]
다음 문제는 JavaScript가 (이전 인터벌 처리 등)를 이미 실행하고 있을 때 인터벌이 발생하는 경우입니다.이 경우 간격은 기억되며 이전 핸들러가 종료되고 브라우저로 제어가 반환되는 즉시 발생합니다.예를 들어 doStuff() 프로세스가 짧거나([-]), 길거나([----]):
. * * • * • * *
[-] [-----][-][-----][-][-] [-]
• 코드를 바로 실행하지 못하고 보류 중인 인터벌 발생을 나타냅니다.
그래서 일정대로 돌아가기 위해 간격을 두고 '따라잡기'를 반복한다.단, 서로 큐잉을 하지 않습니다.인터벌마다 보류 중인 실행은 1개뿐입니다(모두 큐잉되면 브라우저에는 미처리 실행 목록이 계속 표시됩니다).
. * • • x • • x
[------][------][------][------]
x는 실행할 수 없거나 보류 상태로 만들 수 없는 인터벌 발생을 나타내므로 대신 폐기되었습니다.
doStuff() 함수의 실행에 설정된 간격보다 시간이 오래 걸리는 경우 브라우저는 이를 처리하기 위해 100% CPU를 소비하고 응답성이 저하될 수 있습니다.
어떤 것을 왜 사용합니까?
Chained-Timeout은 브라우저에 빈 시간의 보장 슬롯을 제공합니다.Interval은 실행 중인 기능이 일정된 시간에 최대한 가깝게 실행되도록 하기 위해 브라우저 UI의 가용성을 희생합니다.
가능한 한 부드럽게 하고 싶은 일회성 애니메이션의 인터벌을 생각해 보겠습니다만, 페이지가 로드되고 있는 동안 계속 진행되는 애니메이션의 경우, 체인 타임 아웃이 보다 정중합니다.30초마다 발생하는 사소한 업데이트 프로그램 등 요구가 적은 용도의 경우 두 가지 중 하나를 안전하게 사용할 수 있습니다.
브라우저 호환성 측면에서 setTimeout은 setInterval보다 앞서지만 오늘 만나는 모든 브라우저는 둘 다 지원합니다.WinMo < 6 . 5 > 에서의 IE Mobile은 오랜 세월에 걸친 마지막 낙오자였지만, 그것 또한 이제 우리 뒤에 있기를 바란다.
set Interval()
setInterval()는 시간 간격에 도달했을 때 지정된 스크립트를 반복 실행하는 네이티브 기능을 가진 시간 간격 기반의 코드 실행 방식입니다.디폴트로는 루프가 되므로 스크립트 작성자에 의해 콜백 함수에 네스트되어 루프가 되지 않도록 합니다.호출하지 않는 한 인터벌에 따라 계속 발사됩니다.clearInterval().
는, 「」를 해 주세요.setInterval().
function doStuff() {
alert("run your code here when time interval is reached");
}
var myTimer = setInterval(doStuff, 5000);
set Timeout()
setTimeout()는 시간 기반 코드 실행 방식이며 간격에 도달했을 때 스크립트를 한 번만 실행합니다.스크립트를 네스트하여 루프를 일으키도록 조정하지 않으면 반복되지 않습니다.setTimeout()실행하도록 호출하는 함수 내부의 객체.하고 있는 , 「루프」를 한, 그합니다.clearTimeout().
function doStuff() {
alert("run your code here when time interval is reached");
}
var myTimer = setTimeout(doStuff, 5000);
에 한 번 , 「일부러」를 합니다.setTimeout()이는 지정된 간격에 도달했을 때 한 번만 실행되기 때문입니다.
setInterval을 사용하면 향후 코드 실행을 쉽게 취소할 수 있습니다.set Timeout을 사용하는 경우 나중에 취소할 경우에 대비하여 타이머 ID를 추적해야 합니다.
var timerId = null;
function myTimeoutFunction()
{
doStuff();
timerId = setTimeout(myTimeoutFunction, 1000);
}
myTimeoutFunction();
// later on...
clearTimeout(timerId);
대
function myTimeoutFunction()
{
doStuff();
}
myTimeoutFunction();
var timerId = setInterval(myTimeoutFunction, 1000);
// later on...
clearInterval(timerId);
를 찾았습니다.setTimeout할 수 .
function myTimeoutFunction() {
doStuff();
if (stillrunning) {
setTimeout(myTimeoutFunction, 1000);
}
}
myTimeoutFunction();
또, 기능에 문제가 생겼을 경우, 1초마다 에러를 반복하는 것이 아니라, 1회 에러시에 반복을 정지합니다.
바로 그 차이는 그들의 목적에 있다.
setInterval()
-> executes a function, over and over again, at specified time intervals
setTimeout()
-> executes a function, once, after waiting a specified number of milliseconds
그것은 저것만큼 간단합니다.
상세한 것에 대하여는, http://javascript.info/tutorial/settimeout-setinterval 를 참조해 주세요.
내에서 보다 더 는 stuckset이 .인터벌 타임아웃 >>>> > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > >>
예를 들어 doStuff()는 실행에 1500초가 걸리고 setInterval(doStuff, 1000)은 실행합니다.
1) 브라우저가 doStuff()를 실행하는데 1.5초가 소요됩니다.
2) 약 1초 후에 다시 doStuff()를 실행하려고 합니다.그러나 이전 doStuff()는 여전히 실행되므로 브라우저는 이 실행을 큐에 추가합니다(처음 실행 후 실행).
3,4,..) 다음 반복을 위해 실행 큐에 동일한 추가지만 이전 doStuff()는 아직 진행 중입니다.
그 결과 브라우저가 움직이지 않습니다.
이 동작을 방지하려면 setTimeout 내에서 setTimeout을 실행하여 setInterval을 에뮬레이트하는 것이 가장 좋습니다.
setTimeout 호출 간의 타임아웃을 수정하려면 JavaScript의 setInterval 기술 대신 자가 수정을 사용할 수 있습니다.
코드마다 실행 간격이 다르며 온라인 게임과 같은 일부 프로젝트에서는 허용되지 않습니다.먼저 코드를 같은 간격으로 작동시키려면 "my Timeout Function"을 다음과 같이 변경해야 합니다.
function myTimeoutFunction()
{
setTimeout(myTimeoutFunction, 1000);
doStuff();
}
myTimeoutFunction()
이 변경 후에는 다음과 같습니다.
function myTimeoutFunction()
{
doStuff();
}
myTimeoutFunction();
setInterval(myTimeoutFunction, 1000);
그러나 JS는 싱글 스레드이기 때문에 안정적인 결과를 얻을 수 없습니다.현재 JS 스레드가 사용 중일 경우 콜백 기능을 실행할 수 없으며 실행이 2~3밀리초 연기됩니다.초당 60회의 실행이 있으며 랜덤1 ~ 3초의 지연이 발생할 때마다 전혀 받아들일 수 없습니다(1분 후 지연은 약 7200밀리초입니다).다음과 같은 것을 사용하는 것을 권장합니다.
function Timer(clb, timeout) {
this.clb = clb;
this.timeout = timeout;
this.stopTimeout = null;
this.precision = -1;
}
Timer.prototype.start = function() {
var me = this;
var now = new Date();
if(me.precision === -1) {
me.precision = now.getTime();
}
me.stopTimeout = setTimeout(function(){
me.start()
}, me.precision - now.getTime() + me.timeout);
me.precision += me.timeout;
me.clb();
};
Timer.prototype.stop = function() {
clearTimeout(this.stopTimeout);
this.precision = -1;
};
function myTimeoutFunction()
{
doStuff();
}
var timer = new Timer(myTimeoutFunction, 1000);
timer.start();
이 코드는 안정적인 실행 기간을 보장합니다.스레드조차 비지 상태가 되어 1005밀리초 후에 코드가 실행되며, 다음 번에는 995밀리초 동안 타임아웃이 발생하므로 결과는 안정적입니다.
set Timeout을 사용합니다.
분명히 차이는 set Timeout이 메서드를 한 번 호출하고 set Interval이 메서드를 반복 호출한다는 것입니다.
다음은 그 차이를 설명하는 좋은 기사입니다.튜토리얼: set Timeout 및 set Interval을 사용하는 JavaScript 타이머
setInterval(func, milisec)인터벌 시간보다 함수 시간 소모가 크면 어떻게 되는지 궁금했기 때문입니다.
setInterval는 일반적으로 이전 반복이 시작된 직후에 다음 반복을 스케줄링합니다.단, 함수가 아직 진행 중인 경우는 제외합니다.그렇다면,setInterval을 사용법이 경우 즉시 기능이 다시 실행되며, 일정에 따라 다음 반복을 기다릴 필요가 없습니다(시간 초과 기능이 없는 상태이기 때문에).이치노
저는 이것을 Chrome v23에서 테스트했습니다.모든 최신 브라우저에 대해 결정론적 구현이 이루어졌으면 합니다.
window.setInterval(function(start) {
console.log('fired: ' + (new Date().getTime() - start));
wait();
}, 1000, new Date().getTime());
콘솔 출력:
fired: 1000 + ~2500 ajax call -.
fired: 3522 <------------------'
fired: 6032
fired: 8540
fired: 11048
wait함수는 단순한 스레드블로킹 도우미입니다.서버측에서 처리하는데 정확히 2500밀리초가 걸리는 동기식 Ajax 콜입니다.
function wait() {
$.ajax({
url: "...",
async: false
});
}
setInterval과 setTimeout 모두 실행 취소에 사용할 수 있는 타이머 ID(타임아웃이 트리거되기 전)를 반환합니다.다음 중 하나를 취소하려면다음과 같은 간격 또는 clear Timeout:
var timeoutId = setTimeout(someFunction, 1000);
clearTimeout(timeoutId);
var intervalId = setInterval(someFunction, 1000),
clearInterval(intervalId);
또한 페이지를 나가거나 브라우저 창을 닫으면 타임아웃이 자동으로 취소됩니다.
조금 다르게 보자면, setInterval은 코드를 실행할 때까지 대기하는 시간을 설정하는 동안 코드가 지정된 간격(즉, 1000ms 또는 지정한 양)마다 실행되도록 합니다.또한 코드를 실행하는 데 밀리초가 더 걸리기 때문에 1000ms가 추가되므로 set Timeout은 부정확한 시간(1000ms 이상)에 다시 실행됩니다.
예를 들어 타이머/카운트다운은 setTimeout이 아니라 setInterval을 사용하여 수행되므로 지연이 발생하지 않고 코드가 정확하게 지정된 간격으로 실행됩니다.
다음 javascript를 실행하거나 이 JSFiddle을 확인할 때 bobince 답변을 직접 확인할 수 있습니다.
<div id="timeout"></div>
<div id="interval"></div>
var timeout = 0;
var interval = 0;
function doTimeout(){
$('#timeout').html(timeout);
timeout++;
setTimeout(doTimeout, 1);
}
function doInterval(){
$('#interval').html(interval);
interval++;
}
$(function(){
doTimeout();
doInterval();
setInterval(doInterval, 1);
});
음, 방금 배운 것처럼 한 가지 상황에서는 set Timeout이 더 좋습니다.항상 setInterval을 사용합니다.이거는 30분 이상 백그라운드에서 실행할 수 있도록 남겨져 있습니다.그 탭으로 되돌아가자 (코드가 사용된) 슬라이드 쇼가 5초마다 바뀌는 것이 아니라 매우 빠르게 변화하고 있었습니다.실제로 테스트를 거듭할수록 다시 발생합니다.또한 브라우저의 장애여부는 중요하지 않습니다.set Timeout에서는 이 상황은 완전히 불가능하기 때문입니다.
콘솔에서는 다음과 같은 차이가 있습니다.
것이지만, 이의 set 도 set Timeout에 합니다.Maximum call stack size그게 작동을 멈추게 할 거야재귀 함수를 정지시키는 기본 케이스가 없기 때문에 이 함수를 영원히 실행할 수 없습니다.
에서 setInterval너무 짧아서 함수에 대한 이전 호출이 완료되기 전에 발생할 수 있습니다.파이어폭스 78)를 사용합니다.이로 인해 가비지 컬렉션이 메모리를 충분히 빨리 확보하지 못해 메모리 누수가 크게 증가했습니다.「」를 사용합니다.setTimeout(function, 500);가비지 컬렉션을 정리하고 시간이 지남에 따라 메모리를 안정적으로 유지할 수 있는 충분한 시간을 주었습니다.
Serg Hospodarets 경은 답변에서 문제를 언급했고, 나는 그의 발언에 전적으로 동의하지만 메모리 누수/쓰레기 수집 문제는 포함하지 않았다.저도 약간의 동결은 경험했지만, 메모리 사용량이 순식간에 4GB까지 늘어났기 때문에 매우 아쉬웠습니다.그래서 저는 이 대답이 제 처지에 있는 다른 사람들에게 여전히 유익하다고 생각합니다.코멘트에 넣었을 텐데, 그렇게 할 만한 평판이 없어요.당신이 신경 안쓰면 좋겠어요.
옵션 A와 옵션B가 동일하게 동작하는 이유는 대부분 의 위치가setInterval 및setTimeout★★★★★★★★★★★★★★★★★★.
function myTimeoutFunction()
{
doStuff();
setTimeout(myTimeoutFunction, 1000);
}
myTimeoutFunction();
인데, 이 함수는 재귀함수입니다.doStuff복잡합니다.setTimeout는, 모든 가 있습니다.setTimout의 「」를 더한 값입니다.doStuff그 결과 속도가 느려지고 있습니다.
function myTimeoutFunction()
{
doStuff();
}
myTimeoutFunction();
setInterval(myTimeoutFunction, 1000);
편,는setInterval만 된다setInterval 의 ★★★★★★★★★★★★★ ★doStuff일정한 속도를 유지하도록 합니다.
때,더 좋은 , 더 좋은 것은, 더 좋은 을 내릴 수 입니다.setInterval.
고려해야 할 중요한 점은 퍼포먼스입니다.하려면 , 「」를 합니다.setTimeout는 타깃 함수와 함께 재귀적으로 콜을 발신하는 것입니다.체크하면 콜스택이 보이면 비동기적으로 동작하는 것처럼 보입니다.콜스택은 시간이 지날수록 계속 증가하고 있습니다.실,, 그그합합 다다다다Javascript는 멀티스레딩을 지원하지 않기 때문에 자함수를 종료하기 전에 부모함수의 호출을 끝낼 수 없기 때문에 재귀 호출이 있는 한 스택은 계속 커집니다. 편,에서는setInterval대상 함수는 주기적으로 루프로 실행되는 논리를 가지고 있기 때문에 반복적으로 호출할 필요가 없습니다.따라서 콜 스택은 깨끗한 상태로 유지됩니다.브라우저에서 개발자 도구를 사용하여 콜 스택을 볼 수 있으며, 그 차이를 알 수 있습니다.
작은 간격을 장시간 사용하면 차이가 확연해집니다.
생각에는SetInterval ★★★★★★★★★★★★★★★★★」SetTimeout하다SetInterval는 설정된 SetTimeout1번으로 하다
타임아웃 카운트다운초 후에, 다음의 코드 세트를 시험합니다.
setInterval(function(e){
alert('Ugbana Kelvin');
}, 2000);
그리고 나서
setTimeout(function(e){
alert('Ugbana Kelvin');
}, 2000);
당신은 스스로 차이점을 볼 수 있다.
언급URL : https://stackoverflow.com/questions/729921/settimeout-or-setinterval
'programing' 카테고리의 다른 글
| Vuetify Nuxt.js : 이미지 태그에 URL 링크를 추가하는 방법 (0) | 2023.01.04 |
|---|---|
| Python 대화형 세션을 저장하는 방법 (0) | 2023.01.04 |
| Java에서 휘발성과 동기화의 차이 (0) | 2023.01.04 |
| Maria에서 느린 업데이트, 삭제 및 쿼리 삽입DB (0) | 2023.01.04 |
| jQuery를 사용하여 양식 입력 필드를 가져오시겠습니까? (0) | 2023.01.04 |