JavaScript中setTimeout那些事儿：单线程、延迟为0与this指向

setTimeout与JavaScript的单线程真相

常有人疑惑：既然JavaScript被称为单线程语言，那异步执行的setTimeout是如何实现的？难道它打破了单线程的限制？答案是否定的。setTimeout并未实现真正的多线程，其背后的执行流程依然严格遵循单线程模型。

第一步：观察基础执行顺序

首先看以下代码：

<!DOCTYPE html>
<head>
 <title>setTimeout</title>
</head>
<body>
 <script>
   console.log("a");
   //利用setTimeout延迟执行匿名函数
   setTimeout(function(){
    console.log("b");
   },100);
   console.log("c");
 </script>
</body>

运行后控制台输出结果为：

先输出“a”和“c”，100毫秒后才输出“b”。这证明同步代码优先执行，异步任务被推迟到主线程空闲或指定时间到达时处理。

第二步：验证单线程阻塞特性

为了验证单线程的特性，我们进行两个测试：

1. 耗时操作测试：在setTimeout前增加大量同步计算：

var date = new Date();
console.log('first time: ' + date.getTime());
setTimeout(function(){
 var date1 = new Date();
 console.log('second time: ' + date1.getTime() );
 console.log( date1.getTime() - date.getTime() );
},1000);
//重复操作
for(var i=0; i < 10000 ; i++){
 console.log(1);
}

即使设置了1秒延迟，由于前面的循环占用了主线程，最终的时间间隔往往远大于1000毫秒。

2. 死循环阻塞测试：

setTimeout(function(){
 alert("monkey");
},1000);
while(true){};

开启后浏览器卡死，alert从未弹出。因为单线程的主线程被死循环独占，根本无法去检查或执行事件队列中的异步任务。

第三步：理解浏览器内核的多线程协作

虽然JS引擎是单线程的，但浏览器内核是多线程的，主要包括：

• JavaScript引擎线程：负责解析和执行JS代码，处理任务队列中的任务。
• GUI渲染线程：负责页面渲染。该线程与JS引擎互斥，当JS执行时GUI线程会被挂起，以防止DOM操作混乱。
• 事件触发线程：负责控制事件（如鼠标点击、Ajax请求等）。当事件触发时，会将对应的事件处理函数推入任务队列末尾，等待JS引擎空闲时调用。

delay为0的奥秘与应用场景

当setTimeout设置为0时（即延迟时间为0），其表现与直觉不符。例如：

console.log('a');
setTimeout(function(){
 console.log('b');
},0);
console.log('c');

结果输出为：

虽然设为0秒，但“b”依然排在“c”之后。这是因为setTimeout依然是异步任务，会被放入事件队列等待当前栈清空后执行。

延迟为0的实际应用价值

尽管看似只是简单的排队，但在特定场景下非常有用：

1. 模拟动画效果（避免UI卡顿）
直接在循环中修改DOM会导致UI无法即时重绘。利用setTimeout(0)可以将每一次高度变化放入下一轮事件循环，从而让浏览器有机会刷新界面：

function render(i, num) {
 i++; 
 con.style.height = i + 'px';
 if(i < num){
  setTimeout(function() {
   render(i, num);
  },0);
 } else {
  con = null;
  btn = null;
 }
}

2. 事件捕获/冒泡控制
可以利用它调整事件的触发优先级。例如在子元素点击事件中延迟执行，确保父级的事件处理先完成：

child.onclick = function(){
 //利用setTimeout，冒泡结束后，最后输出child
 setTimeout(function(){
  console.log('child'); 
 },0);
}
parent.onclick = function(){
 console.log('parent');
}

点击子元素输出顺序为parent -> child（b在c后出现）：

关于最小延迟时间的说明

即便设置为0，实际上也存在一个系统允许的最小间隔。根据HTML5规范及浏览器差异，通常Firefox为10ms，而部分环境下约为4ms~15ms。因此“0”并不等于“立即”，而是“尽快排队”。

setTimeout中的this指向陷阱

在使用setTimeout时，this的指向是一个经典难点。默认情况下，setTimeout内部的回调函数如果是以普通函数形式调用，其this永远指向全局对象（在浏览器中为window）。

现象演示

var name = '!!';
var obj = {
 name:'monkey',
 print:function(){
  console.log(this.name);
 },
 test:function(){
  //this.print
  setTimeout(this.print,1000);
 }
}
obj.test();

运行结果输出的是“!!”（全局变量name），而非“monkey”。这是因为在test方法中传入setTimeout的是this.print这个引用地址，执行时它脱离了obj对象的环境，变成了全局调用。

解决方案一：闭包保存上下文（that模式）

利用闭包将当前的this保存到局部变量中：

function Fn(){
 var that = this; // 缓存this
 this.age = 18;
 setTimeout(function(){
  console.log(that.age); // 正确输出18
 },1000);
}
new Fn();

解决方案二：使用bind强制绑定

使用ES5提供的bind方法，显式指定执行上下文：

setTimeout(function(){
 console.log(this.age); // 正确输出18
}.bind(this),1000);

通过以上技巧，可以彻底解决setTimeout中丢失对象上下文的问题。

总结

掌握setTimeout的关键在于理解浏览器的多线程架构以及任务队列的运作。无论是处理延迟为0的UI渲染优化，还是精准控制this指向，都离不开对事件循环机制的深刻理解。以上就是对JavaScript中setTimeout的那些事儿的详细内容，更多关于JavaScript高级特性的资料请关注本站其它相关文章！