다른 browser_javascript 기술에서 setTimeout과 setInterval의 차이점-JS 튜토리얼-php.cn

다른 browser_javascript 기술에서 setTimeout과 setInterval의 차이점

WBOY

풀어 주다： 2016-05-16 18:35:50

원래의

1202명이 탐색했습니다.

. (초보자는 setTimeout과 setInterval이 자바스크립트 함수라고 생각할 수도 있는데 이는 잘못된 것입니다. 초보자는 자바스크립트 객체 함수와 DOM 객체 메소드를 쉽게 혼동할 수 있습니다.)

다양한 코드에서 어떻게 보일지 추측해 봅시다. 브라우저. 결과는 어떻게 될까요?

코드 복사 코드는 다음과 같습니다.

 
function f(){ 
var s = ' 인수.길이:' 인수. 길이 '; 
for(var i=0,n=arguments.length;i< n;i ){ 
s = ' [' i ']: ' 인수[ i] ' ​'; 
경고 
} 
setTimeout(f,500,"javascript","AAA") 

 

여기 있습니다. 우리가 논의하고 싶은 것은 언제 어떤 것을 사용해야 하는지가 아니라 각 브라우저에서 이 두 가지 방법의 차이점입니다.
원래는 이 두 가지 방법이 어떤 결과를 초래할 것이라고는 전혀 생각하지 못했습니다. 우연히 알게 되었는데, 이제 여러분과 공유하기 위해 정리해서 적어봤습니다.
setTimeout과 setInterval의 매개변수와 사용법은 동일하지만 기능이 다르기 때문에 번거로움을 덜기 위해 setTimeout만 예로 들어 설명하고 예시를 들겠습니다.
가장 일반적으로 사용되는 setTimeout 형식은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

iTimerID = setTimeout(strJsCode, 50) //strJsCode는 js 코드를 포함하는 문자열입니다.
iTimerID = setTimeout(objFunction, 50) //objFunction은 함수 개체입니다

첫 번째 호출 방법은 js 코드가 포함된 문자열을 전달하는 것입니다. 이 방법의 장점은 간결하다는 점이지만, 단점은 운영 효율성이 좋지 않고 구문 분석에 도움이 되지 않으며 잠재적인 위험이 있다는 것입니다. 더 중요한 것은 처리가 더 복잡하다는 것입니다. 이는 eval의 단점과 일치합니다.
그래서 우리는 일반적으로 두 번째 호출 방법을 사용하는 것이 더 좋다고 생각합니다. (아래 예제는 모두 두 번째 호출 방법을 사용합니다.)

이제 다양한 브라우저에서 첫 번째 코드 조각의 결과를 공개하겠습니다.
IE(6,7,8)는 인수 길이:0입니다. ;
Opera(6,7,8)는:args.length:2; [0]:javascript;
Firefox(3.0)는:args.length:3; :javascript; [1]:AAA; [2]:-15;
정말로 "당신이 노래를 부르면 나는 내 노래를 흥얼거리게 됩니다"라는 차이가 있습니다!
Firefox(3.0)에서는 마지막으로 얻은 숫자가 구체적이지 않습니다. 때로는 0일 수도 있고 때로는 음수일 수도 있습니다. 이 문제는 나중에 논의하겠습니다.
(1) IE 시리즈의 setTimeout
먼저 Microsoft에서 발행한 DHTML 참조 설명서에 나와 있는 내용을 살펴보겠습니다.
setTimeout 메서드
지정된 밀리초가 경과한 후 표현식을 평가합니다. .
구문
iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage])
매개변수
vCode 지정된 간격이 경과된 경우 필수입니다.
iMilliSeconds 숫자를 지정하는 정수입니다.
sLanguage 다음 값 중 하나를 지정하는 문자열입니다.
VBScript 언어는 VBScript입니다.
MSDN의 setTimeout에 대한 지침입니다. :
http://msdn.microsoft.com/en-us/library/ms536753(VS.85).aspx
즉, setTimeout은 3개의 매개변수를 받습니다. 세 번째 매개변수는 스크립팅 언어의 유형을 나타냅니다. 더 많은 매개변수를 전달하면 의미가 없습니다.
따라서 IE에서는 다음 두 가지가 모두 맞습니다.
setTimeout('alert(1)', 50);
setTimeout('msgbox "종료, 재시도, 무시.", vbAbortRetryIgnore vbDefaultButton2, "알림"', 50, ' VBScript' );
(2) Mozilla 시리즈의 setTimeout
Mozilla 공식 웹사이트의 Gecko DOM 참조 매뉴얼에 나와 있는 내용을 살펴보겠습니다.
window.setTimeout
요약
코드를 실행합니다. 지정된 지연 후의 코드 조각 또는 함수
var timeoutID = window.setTimeout(func, Delay, [param1, param2, ...])
var timeoutID = window.setTimeout(code, Delay );
처음 두 매개변수는 동일하고 차이가 없지만 세 번째 매개변수가 다릅니다.
현재 IE 브라우저만 다국어 스크립트를 지원하기 때문에 다른 브라우저는 js 스크립트만 지원하므로 언어 유형 매개변수를 전달할 필요가 없습니다.
Mozilla는 setTimeout에 전달된 세 번째 이후의 매개변수를 이전 func에 매개변수로 순차적으로 전달합니다.
Firefox, Opera, Safari, Chrome 등도 마찬가지입니다.
그러나 Mozilla는 setTimeout에 "지연" 인수라는 버그가 있다고 말했습니다.
"지연" 인수
setTimeout에 의해 호출되는 함수는 Mozilla에서 추가 "지연" 인수를 전달합니다.
, 밀리초 단위의 시간 초과(버그 10637 및 버그 394769 참조)
이는 시작 부분의 예에 있는 Firefox(3.0)의 고유 번호 소스입니다.
Mozilla의 setTimeout 지침:
https://developer.mozilla.org/en/DOM/window.setTimeout
(3) 다른 브라우저 시리즈(Opera, Safari, Chrome)의 setTimeout
기본적으로 Mozilla 시리즈와 동일하지만 Mozilla 시리즈에서는 매개변수가 하나 추가되어 버그가 없습니다.

Wulin Gaiden: setTimeout 사용 팁
(1) IE 함수 전달에서 setTimeout 호출 매개변수
위 분석에서 IE는 setTimeout에서 호출된 함수에 매개변수를 전달하는 것을 지원하지 않는다는 것을 알 수 있습니다. 브라우저 세계의 조화를 위해 매개변수를 호출하는 함수를 새로운 익명 함수로 래핑할 수 있습니다. 예:

코드 복사

코드는 다음과 같습니다. function f(a){ alert (a);

}

// setTimeout(f,50,'hello'); //IE가 아닌 경우 
setTimeout(function(){f('hello')}, 50); //일반
var str='hello'; 
setTimeout(function(){f(str)},50) //일반

 
(2)this 질문
 setTimeout에 의해 호출된 함수가 실행될 때의 컨텍스트는 전역 컨텍스트이며, setTimeout 메소드가 호출될 때의 컨텍스트는 아닙니다. 따라서 setTimeout의 첫 번째 매개변수가 있는 함수가 실행될 때 this는 창을 가리킵니다. setTimeout 메소드를 호출할 때 이를 유지해야 하는 경우 이를 전달해야 합니다. 예: 

코드 복사

코드는 다음과 같습니다.

 
function Person(name){ 
this.name=name; 
var f=function(){alert('내 이름은 'this.name)} 
// setTimeout (f,50); //오류
var THIS=this; 
setTimeout(function(){f.apply(THIS)},50) //정확함, universal
setTimeout() {f.call(THIS)},50); //올바른, 보편적인 
} 
new Person('Jack') 

그게 다입니다.
포스팅은 정신적인 작업이 아니라 실제로는 육체적인 작업으로, 텍스트 정리, 예제 작성, 서식 지정 등 기술적이지 않은 작업이 가장 힘들고 시간이 많이 걸립니다.