介绍一下 setTimeout 的运行机制

<h2>setTimeout简介</h2>
<p>setTimeout()函数：用来指定某个函数或某段代码在多少毫秒之后执行。它返回一个整数，表示定时器timer的编号，可以用来取消该定时器。</p>
<p>先看个简单的例子：</p>
<pre><code class="language-js">console.log(1);
setTimeout(function () {
    console.log(2);
}, 0);
console.log(3);</code></pre>
<p>问：最后的打印顺序是什么？（如果不了解js的运行机制就会答错）</p>
<p>正确答案：<code>1 3 2</code></p>
<p>解析：无论setTimeout的执行时间是0还是1000，结果都是先输出3后输出2，这就是面试官常常考查的js运行机制的问题，接下来我们要引入一个概念，JavaScript 是单线程的。</p>
<h2>JavaScript 单线程</h2>
<p>JavasScript引擎是基于事件驱动和单线程执行的，JS引擎一直等待着任务队列中任务的到来，然后加以处理，浏览器无论什么时候都只有一个JS线程在运行程序，即主线程。那么单线程的JavasScript是怎么实现“非阻塞执行”呢？是通过<strong>任务队列</strong>。</p>
<p>所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。</p>
<p>单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。但是如果有些任务很慢时（比如Ajax操作从网络读取数据），我还是要等结果在执行后一个任务吗？于是，有了一种异步任务。</p>
<p>同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；而异步任务指的是，不进入主线程、而进入&quot;任务队列&quot;（task queue）的任务，只有主线程执行完毕，主线程去通知&quot;任务队列&quot;，某个异步任务可以执行了，该任务才会进入主线程执行。</p>
<p>所以js的运行机制如下：</p>
<ul>
<li>1) 所有同步任务都在主线程上执行，形成一个执行栈（Call Stack）</li>
<li>2) 主线程之外，还存在一个&quot;任务队列&quot;（task queue）。只要异步任务有了运行结果，就在&quot;任务队列&quot;之中放置一个事件</li>
<li>3) 一旦&quot;执行栈&quot;中的所有同步任务执行完毕，系统就会读取&quot;任务队列&quot;，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。</li>
<li>4) 主线程不断重复上面的第三步。</li>
</ul>
<h2>setTimeout运行机制</h2>
<p>setTimeout 和 setInterval的运行机制，其实就是将指定的代码移出本次执行，等到下一轮 Event Loop 时，再检查是否到了指定时间。如果到了，就执行对应的代码；如果不到，就等到再下一轮 Event Loop 时重新判断。</p>
<p>这意味着，setTimeout指定的代码，必须等到本次执行的所有同步代码都执行完，才会执行。</p>

DreamCoders/CoderGuide

内容风险标识

评论 (0)

DreamCoders/CoderGuide .gitee-modal { width: 500px !important; }

内容风险标识