아시겠지만 set Timeout의 비밀.
setTimeout는 우리가 자주 사용하는 것으로 지정된 밀리초수 후에 함수나 계산 표현식을 호출하는 데 사용된다.문법:
setTimeout(code, millisec, args);주의: 코드가 문자열이면 실행 eval() 방법으로 코드를 실행하는 것과 같습니다.물론 이 글은 어떻게 쓰는지 알려줄 뿐만 아니라, 어떻게 집행하는지 이해한다.
1. setTimeout 원리
먼저 코드 세그먼트를 살펴보겠습니다.
var end = 0;
setTimeout(function() { console.log(new Date() - start); }, 500);
while (new Date() - start <= 1000) {}```
， `setTimeout` ， 500 。
： 500
， （ ， 1000 ）：
？ ， JavaScript 。 ， ， JavaScript ， 。
JavaScript。
， ， ：JavaScript ，GUI ， 。
- `JavaScript ` ，JavaScript ， ， JavaScript JavaScript 。
- `GUI ` ， （Repaint） (Reflow) ， 。 ，GUI JavaScript ， JavaScript GUI ，GUI JavaScript 。
- ` `， ， ， JavaScript 。 JavaScript setTimeout、 、Ajax ， JavaScript ， JavaScript （ ）。
， ：
```var start = new Date();
var end = 0;
setTimeout(function() { console.log(new Date() - start); }, 500);
while (new Date() - start <= 1000) {}```
`setTimeout` 500 ， `while` ， 1000 ， while ， ， 1000 ，while JavaScript 。 ， while ， ， setTimeout。
， ，`setTimeout` ( ) ， 。 javascript ， 。
javascript ， ， ， 。
**2、setTimeout “0”**
：
```setTimeout(function(){ // statement}, 0);```
。 ， ， ， setTimeout ， ， setTimeout ， setTimeout 0， 。
，IE8 IE 15.6ms。 ， HTML5 ， （Chrome、ie9+ ）， 4 ， ， ， 2010 。
， `setTimeout(fn,0)` ， ， “ ” ， 。
`setTimeout(fn, 0)` ？ ！ ， setTimeout 。
0s ， ， ， 。
：
```document.querySelector('#one input').onkeydown = function() {
document.querySelector('#one span').innerHTML = this.value;
};
document.querySelector('#second input').onkeydown = function() {
setTimeout(function() {
document.querySelector('#second span').innerHTML = document.querySelector('#second input').value; }, 0);
}; ```
` ：[ ](http://ghmagical.com/iframe/modal/code/:javascript:setTimeout)
， setTimeout ， setTimeout 。
？
，JavaScript keydown ， value ， ， ， value （ keypress ） ， keydown value ， setTimeout(fn, 0)， value ， value ， 。
setTimeout ， ：`onkeydown => onkeypress => onkeyup
` setTimeout ， ：`onkeydown => onkeypress => function => onkeyup`
`keyup` `keydown`， ， ，`keyup` 。
，keydown、keypress、keyup ：
```keydown
keypress
keydown
keypress
...
keyup```
keyup ， keyup 。
`setImmediate()` `setTimeout(fn,0)`：
```if (!window.setImmediate) {
window.setImmediate = function(func, args){
return window.setTimeout(func, 0, args);
};
window.clearImmediate = window.clearTimeout;
}```
setImmediate()` ， ， ， func， ， 。
： IE10 ， ， Nodejs 。
**3、setTimeout ****
3.1 setTimeout this**
setTimeout() window ， this window ， 。
：
```var a = 1;
var obj = {
a: 2,
test: function() { setTimeout(function(){ console.log(this.a); }, 0);
}
};
obj.test(); // 1```
bind() setTimeout this
```var a = 1;
var obj = {
a: 2,
test: function() {
setTimeout(function(){
console.log(this.a);
}.bind(this), 0);
}
};
obj.test(); // 2```
：[JS call、apply、bind ](http://ghmagical.com/article/page/id/UPLfoGI9vJ91)
**3.2 setTimeout **
，setTimeout ， （ ， 。 IE，FireFox ， ，100ms ， ，Safari，chrome，opera 10ms 。）
，setTimeout 、 ....， ？ （ ） 。
```setTimeout(function(a, b){
console.log(a); // 3
console.log(b); // 4},0, 3, 4);```
：[ setTimeout ](http://ghmagical.com/article/page/id/H61NOVU0RZ9Y)
， ！
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
