深入理解JavaScript中setTimeout的执行机制与常见陷阱

作者：灵犀时间：2026-10-30 16:34:22浏览：530

本文深入解析JavaScript中setTimeout的执行机制。尽管JS是单线程，但浏览器内核多线程配合事件队列实现了异步效果。重点探讨延迟时间为0时的最小时间间隔限制，以及如何利用该特性模拟动画和捕获事件。此外，详细分析setTimeout中this指向window的原因，并提供通过闭包变量that和bind方法修复this指向的实用方案。

JavaScript单线程与setTimeout机制

一、setTimeout那些事儿之单线程

通常认为JavaScript运行在单线程环境中，浏览器在任何时刻都仅有一个线程负责执行JavaScript代码。

然而，许多开发者存在疑问：在编程中常用的setTimeout、setInterval以及Ajax等异步操作，难道不是异步执行的吗？

例如：


 <!DOCTYPE html>
 <head>
  <title>setTimeout</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 </head>
 <body>
  <script>
   console.log("a");
   //利用setTimeout延迟执行匿名函数
   setTimeout(function(){
    console.log("b");
   },100);
   console.log("c");
  </script>
 </body>
</html>

运行上述代码并打开Chrome调试器，观察控制台输出结果。

JavaScript单线程与setTimeout机制

这一结果符合预期：由于setTimeout中的回调函数设定在100毫秒后执行，因此会先输出a，接着输出c，等待100毫秒后再输出setTimeout回调中的b。

这是否意味着JavaScript不再是单线程，甚至可以实现多线程？

实际上并非如此。setTimeout并未打破JavaScript的单线程机制，其底层依然保持单线程运行。

要理解这一点，必须深入剖析setTimeout的工作原理。

请观察以下代码并猜测其输出结果：


 <!DOCTYPE html>
 <head>
  <title>setTimeout</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 </head>
 <body>
  <script>
   var date = new Date();
   //打印才进入时的时间
   console.log('first time: ' + date.getTime());
   //一秒后打印setTimeout里匿名函数的时间
   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);
   }
  </script>
 </body>
</html>

阅读上述代码后，你认为输出的时间间隔是多少？1000毫秒吗？

打开Chrome调试器查看实际输出，如下图所示。

JavaScript单线程与setTimeout机制

令人惊讶的是，结果并非1000毫秒！

我们再来看下面的代码：


 <!DOCTYPE html>
 <head>
  <title>setTimeout</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 </head>
 <body>
  <script>
   //一秒后执行setTimeout里的匿名函数，alert下
   setTimeout(function(){
    alert("monkey");
   },1000);
   while(true){};
  </script>
 </body>
</html>

运行该代码后：

浏览器似乎陷入无限刷新状态并卡死，且没有弹出alert对话框。

按理说，即使存在无限while循环，1秒后也应该执行alert。

上述种种现象的根本原因，在于JavaScript的单线程特性。

必须牢记JavaScript是单线程的，setTimeout并未实现多线程，其背后的机制如下：

JavaScript引擎以单线程方式运行，浏览器在任何时刻都只且只有一个线程在运行JavaScript程序。

浏览器的内核则是多线程的，在内核控制下相互配合以保持同步。一个浏览器至少实现三个常驻线程：JavaScript引擎线程、GUI渲染线程以及浏览器事件触发线程。

JavaScript引擎基于事件驱动单线程执行，它一直等待任务队列中的任务到来并加以处理，浏览器无论何时都只有一个JavaScript线程在运行JavaScript程序。

GUI渲染线程负责渲染浏览器界面，当界面需要重绘（Repaint）或由于某种操作引发回流（Reflow）时，该线程就会执行。需要注意的是，GUI渲染线程与JavaScript引擎是互斥的，当JavaScript引擎执行时，GUI线程会被挂起，GUI更新会被保存在一个队列中，等到JavaScript引擎空闲时立即被执行。

事件触发线程负责处理事件，当一个事件被触发时，该线程会把事件添加到待处理队列的队尾，等待JavaScript引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeout、也可来自浏览器内核的其他线程如鼠标点击、Ajax异步请求等，但由于JavaScript的单线程关系，所有这些事件都得排队等待JavaScript引擎处理（当线程中没有执行任何同步代码的前提下才会执行异步代码）。

综上所述，通过以上讲解，上述种种问题迎刃而解。

延迟时间为0的执行特性与应用

二、setTimeout那些事儿之延迟时间为0

当setTimeout的延迟时间设置为0时，大家思考一下它会如何执行？

例如下面的代码：


 <!DOCTYPE html>
 <head>
  <title>setTimeout</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 </head>
 <body>
  <script>
   console.log('a');
   setTimeout(function(){
    console.log('b');
   },0);
   console.log('c');
   console.log('d');
  </script>
 </body>
</html>

运行代码后的结果如下：

JavaScript单线程与setTimeout机制

假设你已经了解JavaScript单线程的运行原理。那么，可能会有这样的疑问：setTimeout的时间为0，都没加到处理队列的末尾，怎么会晚执行呢？不应该立即执行吗？

我的理解是，就算setTimeout的时间为0，但是它仍然是setTimeout啊，原理是不变的。所以会将其加入到队列末尾，0秒后执行。

况且，经过查找资料发现，setTimeout有一个最小执行时间，当指定的时间小于该时间时，浏览器会用最小允许的时间作为setTimeout的时间间隔，也就是说即使我们把setTimeout的毫秒数设置为0，被调用的程序也没有马上启动。

这个最小的时间间隔是多少呢？

这和浏览器及操作系统有关。在John Resig的《Javascript忍者的秘密》一书中提到–Browsers all have a 10ms minimum delay on OSX and a(approximately) 15ms delay on Windows.（在苹果机上的最小时间间隔是10毫秒，在Windows系统上的最小时间间隔大约是15毫秒），另外，MDC中关于setTimeout的介绍中也提到，Firefox中定义的最小时间间隔（DOM_MIN_TIMEOUT_VALUE）是10毫秒，HTML5定义的最小时间间隔是4毫秒。

说了这么多，setTimeout的延迟时间为0，看来没什么意义嘛，都是放在队列后执行嘛。

非也，天生我材必有用，就看你怎么用咯。抛砖迎玉下。

1、可以用setTimeout的延迟时间为0，模拟动画效果哦。

详情请见下代码：


 <!DOCTYPE html>
 <head>
  <title>setTimeout</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 </head>
 <body>
  <div id="container" style="width:100px;height:100px;border:1px solid black;"></div>
  <div id="btn" style="width:40px;height:40px;line-height:40px;margin-top:20px;background:pink;">click</div>
  <script>
   window.onload = function(){
    var con = document.getElementById('container');
    var btn = document.getElementById('btn'); 
    //Params: i 为起始高度，num为预期高度
    function render(i, num) {
     i++; 
     con.style.height = i + 'px';
     //亮点在此
     if(i < num){
      setTimeout(function() {
       render(i, num);
      },0);
     }
     else {
      con = null;
      btn = null;
     }
    };
    btn.onclick = function(){
     render(100, 200);
    };
   };
  </script>
 </body>
</html>

由于是动画，所以想看其效果，还请各位看官运行下代码哦。

代码第19行中，利用setTimeout，在每一次render执行完成（给高度递增1）后，由于Javascript是单线程，且setTimeout里的匿名函数会在render执行完成后，再执行render。所以可以实现动画效果。

2、可以用setTimeout的延迟时间为0，实现捕获事件哦。

当我们点击子元素时，我们可以利用setTimeout的特性，来模拟捕获事件。

请见如下代码：


 <!DOCTYPE html>
 <head>
  <title>setTimeout</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <style> 
   #parent {
    width:100px;
    height:100px;
    border:1px solid black;
   } 
   #child {
    width:50px;
    height:50px;
    background:pink;
   }
  </style>
 </head>
 <body>
  <div id="parent">
   <div id="child"></div>
  </div>
  <script>
   //点击子元素，实现子元素的事件在父元素触发后触发
   window.onload = function(){
    var parent = document.getElementById('parent'); 
    var child = document.getElementById('child');
    parent.onclick = function(){
     console.log('parent');
    }
    child.onclick = function(){
     //利用setTimeout，冒泡结束后，最后输出child
     setTimeout(function(){
      console.log('child'); 
     },0);
    }
    parent = null;
    child = null; 
   }
  </script>
 </body>
</html>

执行代码，点击粉红色方块，输出结果：

JavaScript单线程与setTimeout机制

setTimeout中this指向问题解析

三、setTimeout那些事儿之this

说到this，对于它的理解就是：this是指向函数执行时的当前对象，倘若没有明确的当前对象，它就是指向window的。

好了，那么我们来看看下面这段代码：


 <!DOCTYPE html>
 <head>
  <title>setTimeout</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 </head>
 <body>
  <script>
   var name = '!!';
   var obj = {
    name:'monkey',
    print:function(){
     console.log(this.name);
    },
    test:function(){
     //this.print
     setTimeout(this.print,1000);
    }
   }
   obj.test();
  </script>
 </body>
</html>

通过chrome调试器，查看输出结果：

JavaScript单线程与setTimeout机制

咦，它怎么输出的是”!!”呢？不应该是obj里的”monkey”吗？！！

这是因为setTimeout中所执行函数中的this，永远指向window。

不对吧，那上面代码中的setTimeout(this.print,1000)里的this.print怎么指向的是obj呢？！！

注意哦，我这里说的是“延迟执行函数中的this”，而不是setTimeout调用环境下的this。

什么意思？

setTimeout(this.print,1000)，这里的this.print中的this就是调用环境下的；

而this.print=function(){console.log(this.name);}，这个匿名函数就是setTimeout延迟执行函数，其中的this.name也就是延迟执行函数中的this啦。

嘿嘿，这下明白了吧。


 var age = 24;
function Fn(){
 this.age = 18;
 setTimeout(function(){
  //this代表window
  console.log(this);
  //输出24，而不是Fn的18
  console.log(this.age);
 },1000);
}
new Fn();

咦，那有个疑问，比如我想在setTimeout延迟执行函数中的this指向调用的函数呢，而不是window？！！我们该怎么办呢。

常用的方法就是利用that。

that？

对，that。利用闭包的知识，让that保证你传进去的this，是你想要的。

详情见下:


 var age = 24;
function Fn(){
 //that在此
 var that = this;
 this.age = 18;
 setTimeout(function(){
  console.log(that);
  console.log(that.age);
 },1000);
}
new Fn();

还有一种方法就是，利用bind。

如下:


 var age = 24;
function Fn(){
 this.age = 18;
 //bind传入this
 setTimeout(function(){
  console.log(this);
  console.log(this.age);
 }.bind(this),1000);
}
new Fn();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

作者最新文章

怎么在 Three.js 中加载 GLTF/GLB 模型并修复材质丢失

2026-11-02 09:23:59

three.js 加载常用 3D 模型格式的方法与代码示例

2026-10-31 13:09:57

JS基本数据类型与引用类型的区别：栈内存与堆内存解析

2026-10-30 19:01:16