blocks|key|100160|text|JavaScript不是多线程的。有一些WebWorkers运行在不同的线程中，但这并不是真正的多线程，更像是多个进程，可以相互通信。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|100161|因此，while+(true)+{}将阻塞js上下文，因为它是一个没完没了的循环。|style|CODE|100162|setTimeout将注册一个函数以供以后执行。但在任何时候，代码都不会在相同的上下文中并行运行。|100163|while+(true)本身不一定会创建阻塞循环：|100164|​|100165|async+function+sleep(time)+{
++return+new+Promise((resolve,+_)+=>+setTimeout(resolve,+time))
}

async+function+test(val)+{
++while+(true)+{
++++console.log('in+while+loop+'+%2B+val)
++++await+sleep(1000)
++}
}

test('foo')
test('bar')|code-block|syntax|javascript|100166|100167|因此，您可以说，使用await/async，您可以创建某种协作的多任务处理，比如安装，但仍然没有多线程。|100168|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers^0|K|A|0|0|3|F|0|0|A|0|0|C|0|0|0|0|A|5|G|5|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@$A|14|B|15|1|16]]|C|$]]|$1|D|3|E|5|6|7|17|8|@$A|18|B|19|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|1A|8|@$A|1B|B|1C|F|G]]|9|@]|C|$]]|$1|J|3|K|5|6|7|1D|8|@$A|1E|B|1F|F|G]]|9|@]|C|$]]|$1|L|3|M|5|6|7|1G|8|@]|9|@]|C|$]]|$1|N|3|O|5|P|7|1H|8|@]|9|@]|C|$Q|R]]|$1|S|3|M|5|6|7|1I|8|@]|9|@]|C|$]]|$1|T|3|U|5|6|7|1J|8|@$A|1K|B|1L|F|G]|$A|1M|B|1N|F|G]]|9|@]|C|$]]|$1|V|3|-4|5|6|7|1O|8|@]|9|@]|C|$]]]|W|$X|$5|Y|Z|10|C|$11|12]]]]

JavaScript is not multi threaded. Well there are <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers" rel="noreferrer">WebWorkers</a> that run in a different thread, but that's not really multi threading, more like multiple processes, that communicate with each other.

As of that the <code>while (true) {}</code> will block the js context, because it is an endless loop.

The <code>setTimeout</code> will register a function for later execution. But at no time code will run in parallel for the same context.

A <code>while (true)</code> itself does not necessarily create a blocking loop:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>async function sleep(time) {
 return new Promise((resolve, _) =&gt; setTimeout(resolve, time))
}

async function test(val) {
 while (true) {
 console.log('in while loop ' + val)
 await sleep(1000)
 }
}

test('foo')
test('bar')</code></pre>
</div>
</div>


So you can say with <code>await</code>/<code>async</code> you can create some kind of cooperative multitasking like setup, but still no multi threading

blocks|key|1420022|text|javascript中没有线程。setTimeout只将委托函数推送到下一次将弹出的堆栈中。你可以读到那个JavaScript和线程|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1420023|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/30036/javascript-and-threads^0|1H|D|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

There is no thread in javascript.
setTimeout push just the delegate function insto a stack that will pop for the next pass.
You can read that <a href="https://stackoverflow.com/questions/30036/javascript-and-threads">JavaScript and Threads</a>

blocks|key|574209|text|这些异步函数由浏览器处理。不是JavaScript引擎。JavaScript中没有线程。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|574210|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Those asynchronous functions are handled by the browser. not the JavaScript engine. there are no threads in JavaScript.

blocks|key|1420043|text|这告诉我，setTimeout()并不在单独的线程上运行。|type|blockquote|depth|inlineStyleRanges|entityRanges|data|1420044|是。JS中只有一个线程。|unstyled|1420045|但在最近的一次采访中，面试官提出了相反的建议.这是否意味着setTimeout()依赖于浏览器/实现？|1420046|据我所知，只有引擎从一个浏览器变成另一个浏览器。内部机制是相同的事件循环处理器.|1420047|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$]]|$1|E|3|F|5|6|7|M|8|@]|9|@]|A|$]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$]]|$1|I|3|-4|5|D|7|O|8|@]|9|@]|A|$]]]|J|$]]

<blockquote>
 This tells me that setTimeout() does not run on a separate thread.
</blockquote>

Yes. There is only one thread in JS.

<blockquote>
 But on a recent interview, the interviewer suggested otherwise... Does
 that mean that setTimeout() is browser/implementation dependent?
</blockquote>

As far as i know only engine changed from browser to browser. Internal mechanism stands the same - event-loop processor.

blocks|key|574256|text|调用setTimeout()时，控件通常会传递回主机环境(例如浏览器或本机node.js代码)。现在正在发生的是，您的回调将被注册到一个定时器列表中，以便在将来执行。setTimeout()将返回到将继续执行的代码。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|574257|当脚本最终完成时，控件将再次返回到具有事件循环的主机环境，该循环一直在旋转，直到最后调用注册的回调为止。|574258|实际上，您可以在JavaScript本身中通过实现一个事件循环来实现类似的东西，只是为了好玩：|574259|class+EventLoop+{

++++constructor()+{
++++++++this.entries+=+[];++//+a+list+of+all+registered+callbacks
++++++++this.turns+=+0;+++++//+keep+track+of+how+many+turns+of+the+loop+we+make
++++}

++++//+Adds+a+new+callback+to+the+list

++++schedule(callback,+condition)+{
++++++++this.entries.push([condition,+callback]);
++++}

++++//+To+removes+a+callback+when+it's+been+called

++++remove(entry)+{
++++++++this.entries.splice(this.entries.indexOf(entry),+1);
++++}

++++//+Run+the+loop+until+all+registered+callbacks+were+called
++++//+Returns+the+number+of+turns+it+made+in+the+while+loop

++++run(timeout)+{

++++++++this.turns+=+0;

++++++++while+(this.entries.length)+{
++++++++++++for+(const+entry+of+this.entries)+{
++++++++++++++++const+[condition,+callback]+=+entry;
++++++++++++++++if+(condition())+{
++++++++++++++++++++callback();
++++++++++++++++++++this.remove(entry);
++++++++++++++++}
++++++++++++}

++++++++++++this.turns%2B%2B;
++++++++}

++++++++return+this.turns;
++++}

}|code-block|syntax|javascript|574260|我们可以使用这个EventLoop来实现类似于setTimeout()的东西。|574261|//+Define+a+handy+log+function

const+log+=+((startTime)+=>+(text)+=>+{

++++console.log(`t%2B${(Date.now()+-+startTime).toFixed(3)}ms:+${text}`);

})(Date.now());

//+Create+an+event+loop

const+loop+=+new+EventLoop();

//+Define+a+setTimeout+using+the+event+loop

const+defer+=+(fn,+timeout)+=>+{

++++const+start+=+Date.now();
++++const+end+=+start+%2B+timeout;

++++loop.schedule(fn,+()+=>+Date.now()+>=+end);
};

//+Schedule+some+nested+events

defer(()+=>+{

++++log('I+run+second');

++++defer(()+=>+{

++++++++log('I+run+third');

++++++++defer(()+=>+{

++++++++++++log('I+run+fourth');

++++++++},+200);

++++},+200);

},+200);

//+Log+syncronously

log('I+run+first');

//+Start+the+event+loop+turning+(blocks+until+all+events+are+complete)

const+turns+=+loop.run();

log(`Loop+exited+after+${turns}+turns`);

//+This+will+log+after+event+loop+has+finished+running

log('I+run+last');|574262|如果您在node.js中运行这个程序，您将得到以下输出：|574263|t%2B0.000ms:+I+run+first+t%2B200.000ms:+I+run+second+t%2B400.000ms:+I+run+third+t%2B600.000ms:+I+run+fourth+t%2B600.000ms:+Loop+exited+after+6441157+turns+t%2B600.000ms:+I+run+last|574264|我们刚刚用一个线程在纯JavaScript中创建了一个异步超时。实际上，您不会在JavaScript中这样做，事件循环将在本机代码中实现，并托管在主机环境中。这样一个事件循环的一个例子是由利布夫使用的Node.js。与我们的玩具JS示例相比，Libuv可以更有效地执行任务，它可以使当前线程处于休眠状态(从技术上讲，它不会这样做，它会轮询IO，但概念相同)，因此它不会浪费CPU周期。|574265|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/libuv/libuv^0|2|C|2B|C|0|0|0|0|N|C|0|0|0|0|4O|0|2M|3|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1B|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1C|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1D|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1E|8|@$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|L|7|1H|8|@]|D|@]|E|$M|N]]|$1|S|3|T|5|6|7|1I|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|1J|8|@$9|1K|A|1L|B|C]]|D|@]|E|$]]|$1|W|3|X|5|6|7|1M|8|@]|D|@$9|1N|A|1O|1|1P]]|E|$]]|$1|Y|3|-4|5|6|7|1Q|8|@]|D|@]|E|$]]]|Z|$10|$5|11|12|13|E|$14|15]]]]

When you call <code>setTimeout()</code> typically control is passing back into the host environment (the browser or native node.js code for example). What is happening then is that your callback is being registered in a list of timers to execute in the future. <code>setTimeout()</code> will the return back to your code which will continue executing.

When your script finally completes, control again will return to the host environment which has an event loop, this loop keeps spinning until it's finally time to call your registered callback. 

You can actually approximate something like this in JavaScript itself by implementing an event loop just for fun:

<pre><code>class EventLoop {

 constructor() {
 this.entries = []; // a list of all registered callbacks
 this.turns = 0; // keep track of how many turns of the loop we make
 }

 // Adds a new callback to the list

 schedule(callback, condition) {
 this.entries.push([condition, callback]);
 }

 // To removes a callback when it's been called

 remove(entry) {
 this.entries.splice(this.entries.indexOf(entry), 1);
 }

 // Run the loop until all registered callbacks were called
 // Returns the number of turns it made in the while loop

 run(timeout) {

 this.turns = 0;

 while (this.entries.length) {
 for (const entry of this.entries) {
 const [condition, callback] = entry;
 if (condition()) {
 callback();
 this.remove(entry);
 }
 }

 this.turns++;
 }

 return this.turns;
 }

}
</code></pre>

We can use this EventLoop to implement something like a <code>setTimeout()</code>:

<pre><code>// Define a handy log function

const log = ((startTime) =&gt; (text) =&gt; {

 console.log(`t+${(Date.now() - startTime).toFixed(3)}ms: ${text}`);

})(Date.now());

// Create an event loop

const loop = new EventLoop();

// Define a setTimeout using the event loop

const defer = (fn, timeout) =&gt; {

 const start = Date.now();
 const end = start + timeout;

 loop.schedule(fn, () =&gt; Date.now() &gt;= end);
};

// Schedule some nested events

defer(() =&gt; {

 log('I run second');

 defer(() =&gt; {

 log('I run third');

 defer(() =&gt; {

 log('I run fourth');

 }, 200);

 }, 200);

}, 200);

// Log syncronously

log('I run first');

// Start the event loop turning (blocks until all events are complete)

const turns = loop.run();

log(`Loop exited after ${turns} turns`);

// This will log after event loop has finished running

log('I run last');
</code></pre>

If you run this with node.js you'll get the following output:

<code>
t+0.000ms: I run first
t+200.000ms: I run second
t+400.000ms: I run third
t+600.000ms: I run fourth
t+600.000ms: Loop exited after 6441157 turns
t+600.000ms: I run last
</code>

We just created an asynchronous timeout in pure JavaScript with a single thread. Now in reality you wouldn't do this in JavaScript, the event loop would be implemented in native code and hosted in the host environment. An example of such an event loop is <a href="https://github.com/libuv/libuv" rel="nofollow noreferrer">libuv</a> used by Node.js. Libuv can do things more efficiently than our toy JS example, it can put the current thread to sleep (technically it doesn't do this, it polls for IO but same concept) so it's not wasting CPU cycles.

Curious to see whether <code>setTimeout()</code> will be fired up asynchronously, I tried the following test script:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function timedText() {
 var x = document.getElementById("txt");
 setTimeout(function() {
 x.value = "1 second"
 }, 1000);
 setTimeout(function() {
 x.value = "2 seconds"
 }, 2000);
 setTimeout(function() {
 x.value = "3 seconds"
 }, 3000);

 while (true) {}
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;Click on the button below. The input field will tell you when two, four, and six seconds have passed.&lt;/p&gt;

&lt;button onclick="timedText()"&gt;Display timed text&lt;/button&gt;
&lt;input type="text" id="txt"&gt;</code></pre>
</div>
</div>


Sure enough, clicking the button causes the browser to hang.

This tells me that <code>setTimeout()</code> does not run on a separate thread.

But on a recent interview, the interviewer suggested otherwise... Does that mean that <code>setTimeout()</code> is browser/implementation dependent?

Does setTimeout() run on a separate thread?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

出于对是否会异步启动setTimeout()的好奇，我尝试了以下测试脚本：​function timedText() {  var x = document.getElementById("txt");  setTimeout(function() {    x.value = "1 second"  }, 1000)...

问setTimeout()是否在单独的线程上运行？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问setTimeout()是否在单独的线程上运行？EN