JavaScript 개발자가 알아야 할 setTimeout 비밀

Timer

setTimeout

는 우리가 자주 사용하는 것인데, 지정된 밀리초 후에 함수를 호출하거나 표현식을 계산하는 데 사용됩니다.

구문:

setTimeout(code, millisec, args);

참고: 코드가 문자열인 경우

eval()

메서드를 실행하여 코드를 실행하는 것과 같습니다.

물론 이 글에서는

setTimeout

의 사용법을 알려줄 뿐만 아니라, 어떻게 실행되는지까지 이해하고 있습니다.

1. setTimeout의 원리

먼저 코드를 살펴보겠습니다.

var start = new Date(); 
var end = 0; 
setTimeout(function() {  console.log(new Date() - start); }, 500); 
while (new Date() - start <= 1000) {}

위 코드에서,

setTimeout

타이머의 경우 지연 시간은 500밀리초입니다.

인쇄 결과가 500장이라고 생각하시나요

그런데 사실은 기대 이상입니다. (인쇄해 보면 다를지도 모르겠습니다.) 하지만 확실히 1000밀리초보다 클 것입니다.):



왜 그렇죠? 그 이유는 JavaScript가 단일 스레드에서 실행되기 때문입니다. 즉, 어느 시점에나 JavaScript 프로그램을 실행하는 스레드는 단 하나뿐이며 동시에 여러 코드 조각을 실행할 수 없습니다.

브라우저에서 자바스크립트를 살펴보겠습니다.

브라우저의 커널은 동기화를 유지하기 위해 커널의 제어 하에 서로 협력합니다. 브라우저는 JavaScript 엔진 스레드, GUI 렌더링 스레드, 브라우저라는 세 가지 이상의 상주 스레드를 구현합니다. 이벤트 트리거 스레드.

JavaScript引擎

는 이벤트 기반 단일 스레드 실행을 기반으로 합니다. JavaScript 엔진은 작업 대기열에 작업이 도착하기를 기다렸다가 이를 처리합니다. 스레드는 언제든지 실행됩니다.

GUI渲染线程

는 인터페이스를 다시 그려야 하거나(Repaint) 일부 작업으로 인해 리플로우(Reflow)가 발생하는 경우 이 스레드가 실행됩니다. 그러나 GUI 렌더링 스레드와 JavaScript 엔진은 상호 배타적이라는 점에 유의해야 합니다. JavaScript 엔진이 실행되면 GUI 스레드가 일시 중지되고 GUI 업데이트가 대기열에 저장되며 JavaScript가 실행될 때 즉시 실행됩니다. 엔진이 유휴 상태입니다.

事件触发线程

, 이벤트가 트리거되면 스레드는 보류 중인 대기열의 끝에 이벤트를 추가하고 JavaScript 엔진의 처리를 기다립니다. 이러한 이벤트는 setTimeout과 같은 JavaScript 엔진에 의해 현재 실행되는 코드 블록이나 마우스 클릭, 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

루프에서 while 루프는 간격이 1000밀리초보다 클 때만 점프됩니다. 즉, 1000밀리초 이전에는 while 루프가 JavaScript 스레드를 차지합니다. 즉, while에서 점프하기를 기다린 후에야 스레드는 유휴 상태가 되고 이전에 정의된 setTimeout을 실행합니다.

마지막으로

setTimeout

는 작업(실행해야 하는 함수)이 지정된 시간 이후에 대기하도록 작업 대기열에 삽입된다는 것만 보장할 수 있다고 결론을 내릴 수 있지만 실제로는 그렇지 않습니다. 작업이 언제 구현될지는 보장하지 않습니다. JavaScript를 실행하는 스레드가 사용 가능해지면 대기열에서 작업을 제거하고 실행합니다.

JavaScript 스레드는 시간이 많이 걸리는 작업으로 인해 차단되지 않기 때문에 대기열에 있는 작업을 신속하게 꺼내어 실행할 수 있습니다. 우리에게 비동기 실행이라는 환상을 만들어내는 것도 바로 이 대기열 메커니즘입니다. .

2. setTimeout "0"의 좋은 파트너

다음 코드를 본 적이 있을 것입니다:

setTimeout(function(){ // statement}, 0);

위 코드는 즉시 실행을 의미합니다. 원래 의도는 호출 함수를 즉시 실행하는 것이지만 실제로는 위 코드가 즉시 실행되지 않습니다. 이는 setTimeout에 지정된 시간이 해당 시간보다 작을 때 브라우저가 허용되는 최소 실행 시간을 사용하기 때문입니다. 즉, setTimeout의 지연 시간을 0으로 설정하더라도 호출된 프로그램은 즉시 시작되지 않습니다.

브라우저마다 실제 상황이 다릅니다. IE8 및 이전 IE의 시간 정확도는 15.6ms입니다. 그러나 HTML5의 등장으로 고급 버전의 브라우저(Chrome, IE9+ 등)에서는 정의된 최소 시간 간격이 4밀리초 이상으로 이 값보다 낮으면 자동으로 증가하며 2010년에는 증가합니다. 이후 게시된 브라우저 전체에서 일관되게 채택되었습니다.

따라서

setTimeout(fn,0)

를 작성할 때 실제로는 대기열 점프 작업을 구현하고 있으며, 브라우저가 "가능한 한 빨리" 콜백하도록 요구하지만 실제로는 얼마나 빨리 호출할 수 있습니까? be 그것은 모두 브라우저에 따라 다릅니다.

그럼

setTimeout(fn, 0)

의 용도는 무엇인가요? 실제로 작업 실행 순서를 변경할 수 있다는 점이 유용합니다. 브라우저는 현재 작업 대기열의 작업을 완료한 후 setTimeout 대기열에 누적된 작업을 실행하기 때문입니다.

지연 후 실행할 태스크를 0초로 설정하여 태스크 실행 순서를 변경하고, 태스크 발생을 지연시키며, 비동기적으로 실행되도록 할 수 있습니다.

인터넷에서 인기 있는 예를 살펴보겠습니다.

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);
};

`实例：实例

当你往两个表单输入内容时，你会发现未使用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

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);

 以上就是JavaScript 开发者应该知道的 setTimeout 秘密 的内容，更多相关内容请关注PHP中文网（www.php.cn）！