JavaScript window.setTimeout()의 자세 한 용법
10630 단어 JavaScriptwindow.setTimeout
setInterval 과 setTimeout 의 차이
setTimeout 하면 setInterval 을 쉽게 생각 할 수 있 습 니 다.이 두 가지 용법 은 차이 가 많 지 않 지만 차이 가 있 습 니 다.오늘 같이 정리 하 겠 습 니 다!
setTimeout
정의 와 용법:setTimeout()방법 은 지정 한 밀리초 후에 함수 나 계산 표현 식 을 호출 하 는 데 사 용 됩 니 다.
문법:setTimeout(code,millisec)
인자:code(필수):호출 할 함수 후 실행 할 JavaScript 코드 문자열 입 니 다.millisec(필수):코드 를 실행 하기 전에 기 다 려 야 할 밀리초 수 입 니 다.알림:setTimeout()은 code 를 한 번 만 실행 합 니 다.여러 번 호출 하려 면 setInterval()을 사용 하거나 code 자체 가 setTimeout()을 다시 호출 하도록 하 십시오.
setInterval
setInterval()방법 은 지정 한 주기(밀리초 단위)에 따라 함수 나 계산 식 을 호출 할 수 있 습 니 다.
setInterval()방법 은 clearInterval()이 호출 되 거나 창 이 닫 힐 때 까지 함 수 를 계속 호출 합 니 다.setInterval()에서 되 돌아 오 는 ID 값 은 clearInterval()방법의 인자 로 사용 할 수 있 습 니 다.
문법:setInterval(code,millisec[,"lang"])
인자:code 가 필요 합 니 다.호출 할 함수 나 실행 할 코드 문자열 입 니 다.millisec 필수.주기 적 으로 실행 하거나 코드 간 의 시간 간격 을 밀리초 로 계산 합 니 다.
반환 값:Window.clear Interval()에 전달 하여 code 에 대한 주기 적 인 실행 을 취소 할 수 있 는 값 입 니 다.
구별
위 를 통 해 알 수 있 듯 이 setTimeout 과 setinterval 의 가장 주요 한 차 이 는:
setTimeout 은 한 번 만 실 행 됩 니 다.즉,설 정 된 시간 이 되면 지정 한 코드 를 실행 하고 실행 이 끝나 면 끝 납 니 다.실행 중인 코드 에서 같은 setTimeout 명령 을 다시 실행 하면 반복 적 으로 실행 할 수 있 습 니 다.(즉,반복 적 으로 실행 하려 면 함수 자체 가 setTimeout()을 다시 호출 해 야 합 니 다.
setinterval 은 시간 간격 을 설정 할 때마다 지정 한 코드 를 실행 하 는 순환 으로 실 행 됩 니 다.이것 은 진정한 타이머 다.
setinterval 은 사용 이 간단 하고 setTimeout 은 유연 하 며 수시로 순환 을 종료 할 수 있 으 며 고정 되 지 않 은 시간 간격 으로 실행 할 수 있 습 니 다.예 를 들 어 첫 번 째 1 초,두 번 째 2 초,세 번 째 3 초 등 입 니 다.
저 는 개인 적 으로 setTimeout 을 더 좋아 합 니 다!
setTimeout 의 용법
우리 함께 사례 를 실행 합 시다.먼저 수첩 을 열 고 아래 코드 를 붙 여 효 과 를 실행 합 시다!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h1> <font color=blue> </font> </h1>
<p> !</p>
<script>
setTimeout("alert(' , ')", 3000 )
</script>
</body>
</html>setTimeout 도 function 을 실행 할 수 있 고 계속 반복 할 수 있 습 니 다!우리 다시 한 번 사례 를 만들어 보 자.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
var x = 0
function countSecond()
{
x = x+1
document.haorooms.haoroomsinput.value=x
setTimeout("countSecond()", 1000)
}
</script>
</head>
<html>
<body>
<form name="haorooms">
<input type="text" name="haoroomsinput"value="0" size=4 >
</form>
<script>
countSecond()
</script>
</body> </html>사례 가 없 으 면 학습 이 빠 르 지 않 습 니 다.우 리 는 다시 예 를 들 어 haorooms 의 한 페이지 에 머 무 르 는 시간 을 계산 합 니 다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
x=0
y=-1
function countMin()
{ y=y+1
document.displayMin.displayBox.value=y
setTimeout("countMin()",60000)
}
function countSec()
{ x = x + 1
z =x % 60
document.displaySec.displayBox.value=z
setTimeout("countSec()", 1000)
}
</script> </head>
<body>
<table> <tr valign=top> <td> haorooms : </td>
<td>
<form name=displayMin>
<input type=text name=displayBox value=0 size=4 >
</form>
</td>
<td> </td>
<td>
<form name=displaySec> </td>
<td> <input type=text name=displayBox value=0 size=4 >
</form>
</td>
<td> 。</td> </tr>
</table>
<script>
countMin()
countSec()
</script>
</body>
</html>clearTimeout( )
클 리 어 타임 아웃(clearTimeout)을 다시 한 번 보 겠 습 니 다.
clearTimout()는 다음 과 같은 문법 이 있 습 니 다.
clearTimeout(timeoutID)
clearTimeout()을 사용 하려 면 setTimeout()을 설정 할 때 이 setTimout()의 이름 을 주 십시오.이 이름 은 timeoutID 입 니 다.우리 가 멈 추 라 고 할 때 이 timeoutID 로 멈 추 라 고 합 니 다.이것 은 사용자 정의 이름 이지 만 많은 사람들 이 timeoutID 를 이름 으로 합 니 다.
아래 의 예 에서 두 개의 timeoutID 를 설정 하고 각각 meter 1 과 meter 2 라 고 명명 합 니 다.다음 과 같 습 니 다.
timeoutID ↓ meter1 = setTimeout(“count1( )”, 1000) meter2 = setTimeout(“count2( )”, 1000)
이 meter 1 및 meter 2 이 timeoutID 이름 을 사용 하면 clearTimeout()을 설정 할 때 어떤 setTimeout()에 효과 가 있 는 지 지정 할 수 있 으 며 다른 setTimeout()에 영향 을 주지 않 습 니 다.
다음은 clearTimeout()사례 를 살 펴 보 겠 습 니 다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
x = 0
y = 0
function count1()
{ x = x + 1
document.display1.box1.value = x
meter1=setTimeout("count1()", 1000)
}
function count2()
{ y = y + 1
document.display2.box2.value = y
meter2=setTimeout("count2()", 1000)
}
</script> </head>
<body>
<p> </br>
<form name="display1">
<input type="text" name="box1" value="0" size=4 >
<input type=button value=" " onClick="clearTimeout(meter1) " >
<input type=button value=" " onClick="count1() " >
</form>
<p>
<form name="display2">
<input type="text" name="box2" value="0" size=4 >
<input type=button value=" " onClick="clearTimeout(meter2) " >
<input type=button value=" " onClick="count2() " >
</form>
<script>
count1()
count2()
</script>
</body>
</html>위의 설명 을 통 해 setTimeout 에 대해 알 고 계 신지 모 르 겠 지만 다음 에 setTimeout 을 사용 하 는 것 이 익숙 하지 않 을까요?더 이상 setTimeout 과 setInterval 을 헷 갈 리 게 하 는 거 아니 야?만약 당신 이 모 르 는 것 이 있다 면,서로 교류 하고,함께 향상 시 킬 수 있 습 니 다.감사합니다!
setTimeout(표현 식,지연 시간)
setTimeout(표현 식,대화 시간)
지연 시간/대화 시간 은 호 초 단위(1000 ms=1s)setTimeout 이 실 행 될 때 불 러 온 후 지 정 된 시간 을 지연 시 킨 후 표현 식 을 한 번 실행 하고 한 번 만 실행 합 니 다.
setTimeout 이 실 행 될 때 불 러 온 후 지정 한 시간 마다 표현 식 을 실행 합 니 다.
1.기본 용법:
코드 실행:
var i=0;
setTimeout("i+=1;alert(i)",1000);
함수 실행:
var i=0;
setTimeout(function(){i+=1;alert(i);},1000);
/위의 두 가지 방법 을 비교 하 는 것 에 주의 하 세 요.
다음 실행 함수 의:
var i=0;
function test(){
i+=1;
alert(i);
}
setTimeout("test()",1000);
이렇게 할 수도 있다.
setTimeout(test,1000);
요약:
setTimeout 의 원형 은 다음 과 같 습 니 다.
iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage])
setTimeout 은 두 가지 형식 이 있 습 니 다.
setTimeout(code,interval)
setTimeout(func,interval,args)
그 중 code 는 문자열 입 니 다.
func 는 함수 입 니 다.
"함수"의 의 미 를 주의 하 십시오.한 문장 이 아니 라 표현 식 입 니 다.
예 를 들 어 당신 은 주기 적 으로 함 수 를 실행 하고 싶 습 니 다.
function a(){
//...
}
쓰다
setTimeout("a()",1000)
혹시
setTimeout(a,1000)
여기 주의 두 번 째 형식 중 a 입 니 다.a()로 쓰 지 마 세 요.기억 하 세 요!!
펼 쳐 보면 여기에 쓴 것 이 무엇 이 든 변수 라면 특정한 함 수 를 가리 키 는 변수 일 것 입 니 다.함수 라면 반환 값 은 함수 입 니 다.
2,setTimeout 으로 setInterval 기능 구현
사고방식 은 매우 간단 하 다.바로 한 함수 에서 끊임없이 자신 을 호출 하여 집행 하 는 것 이 마치 귀환 하 는 것 같다
var i=0;
function xilou(){
i+=1;
if(i>10){alert(i);return;}
setTimeout("xilou()",1000);
//
//setTimeout(xilou,1000);
}
3,클래스 에서 setTimeout 사용
드디어 본론 에 이 르 렀 습 니 다.사실 클래스 에서 여러분 이 직면 한 문 제 를 사용 하 는 것 은 모두 this 에 관 한 것 입 니 다.이 this 문 제 를 해결 하기 만 하면 모든 일 은 걱정 이 없습니다.
하하.분석 해 봅 시다.
function xilou(){
this.name="xilou";
this.sex=" ";
this.num=0;
}
xilou.prototype.count=function(){
this.num+=1;
alert(this.num);
if(this.num>10){return;}
// , 。
setTimeout("this.count()",1000);//A: x.count() ： 。
setTimeout("count()",1000);//B: ：
setTimeout(count,1000);//C: ：'count'
//
var self=this;
setTimeout(function(){self.count();},1000);//D:
}
var x=new xilou();
x.count();
오류 분석:
A:중의 this 는 사실 window 대상 을 말 하 는데 현재 인 스 턴 스 대상 을 말 하 는 것 이 아 닙 니 다.
B:C:와 의 count()와 count 는 사실 하나의 count()라 는 함 수 를 가리 키 지만 window.count()일 수도 있 습 니 다.window.count()는 count()로 생략 할 수 있 기 때 문 입 니 다.
D:변 수 를 self 로 현재 인 스 턴 스 대상 을 가리 키 면 js 분석 엔진 은 this 가 누 구 를 가리 키 는 지 혼합 하지 않 습 니 다.
그 나 저 나 setTimeout("this.count()",1000)의 this 가 window 대상 을 가리 키 는 것 은 알 지만 왜 그런 지 모르겠다.
window 개체^ ^(머리 가 어지럽다...)
그러면 우 리 는 이 setTimeout 이 어떻게 정의 되 었 는 지 상상 할 수 있다.
setTimeout 은 window 의 한 방법 으로 모두 다음 과 같다.window.setTimeout()
그것 은 이렇게 정의 되 어야 한다.
window.setTimeout=function(vCode, iMilliSeconds [, sLanguage]){
//.....
return timer//
}
그래서 setTimeout()에 this 를 들 어 올 때 당연히 현재 대상 window 를 말 합 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
