>  기사  >  웹 프론트엔드  >  setInterval()과 setTimeout()의 사용법 및 차이점 예시_기본지식

setInterval()과 setTimeout()의 사용법 및 차이점 예시_기본지식

WBOY
WBOY원래의
2016-05-16 17:14:421062검색
1.setInterval() 사용법_학습
코드 복사 코드는 다음과 같습니다.

//1초마다 자동으로 메소드 실행
var c=0;
function showLogin()
{
alert(c )
}
//setInterval 메소드 또는 문자열, 밀리초, 매개변수 배열(메서드))
setInterval("showLogin()", "1000")

2.setTimeout

js 클래스에서 setTimeout() 사용 방법
setTimeout(표현식, 지연 시간)
setTimeout(표현식, 상호 작용 시간)
지연 시간/상호 작용 시간은 밀리초 단위입니다. setTimeout(1000ms=1s)을 실행하면 로드 후 지정된 시간을 지연시킨 후 한 번만 실행합니다. setTimeout을 실행하면 로드 후 지정된 시간마다 한 번씩 표현식을 실행합니다.
1, 기본 사용법:
코드를 실행합니다. :
var i=0;
setTimeout("i =1;alert(i)",1000)
함수 실행:
var i=0; ){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을 사용합니다.
사실, 수업에서 모두가 직면하는 문제는 이 문제가 해결되는 한 걱정할 것이 없습니다.
하하. 분석해 보겠습니다.



코드 복사 코드는 다음과 같습니다. 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;}
//아래 4가지 메소드를 차례로 사용하여 테스트합니다. .
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: Correct

}

var x=new xilou();
x.count()


오류 분석:
A:의 This는 실제로 현재 인스턴스 개체가 아닌 창 개체를 참조합니다.
B: 및 C:의 count() 및 count는 실제로 It을 참조합니다. count()라는 별도의 함수이지만 window.count()가 count()로 생략될 수 있기 때문에 window.count()일 수도 있습니다.
D: 변수 self가 현재 인스턴스 객체를 가리키도록 하세요. Node.js는 이것이 누구를 참조하는지에 대해 엔진을 혼동하지 않습니다.

그런데 setTimeout("this.count()",1000)의 this가 window 개체를 참조한다는 것을 알고 있음에도 불구하고 이것이 왜
window 개체인지 이해하지 못합니다^ _^ (약간 어지러움...)
그러면 이 setTimeout이 어떻게 정의되는지 상상할 수 있습니다.
setTimeout은 window의 메서드이며 전체 이름은 다음과 같습니다. window.setTimeout()
그렇게 해야 합니다. 다음과 같이 정의됩니다:
window.setTimeout=function(vCode, iMilliSeconds [, sLanguage]){
//.....Code
타이머 반환//마커 반환
}
그래서 이것이 setTimeout()에 전달되면 당연히 그것이 속한 현재 개체 창을 참조합니다.

간단한 예:
코드 복사 코드는 다음과 같습니다.




내 제목 1

="button " id="click" onClick="change()">
여기를 클릭하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.