blocks|key|1541751|text|Javascript是单线程的，但浏览器不是。浏览器至少有三个线程:+Javascript线程、UI线程和计时线程，其中setTimeout和setInterval的定时由计时线程完成。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1541752|当调用setTimeout或setInterval时，浏览器中的计时器线程开始计数，当时间增加时，将回调函数放入javascript线程的执行堆栈中。在堆栈上的其他函数完成之前，不执行回调函数。因此，如果在超时时执行其他耗时的函数，则setTimeout的回调不会及时完成。|1541753|entityMap^0|1O|A|1Z|B|0|3|A|E|B|39|A|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|I|$]]

Javascript is singled-threaded but the browser is not. The browser has at least three threads: Javascript engine thread, UI thread, and timing thread, where the timing of <code>setTimeout</code> and <code>setInterval</code> are done by the timing thread.

When calling <code>setTimeout</code> or <code>setInterval</code>, a timer thread in the browser starts counting down and when time up puts the callback function in javascript thread's execution stack. The callback function is not executed before other functions above it in the stack finishes. So if there are other time-consuming functions being executed when time up, the callback of <code>setTimeout</code> will not finish in time.

blocks|key|4008065|text|setTimeout+/+setInterval如何在JavaScript中工作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4008066|浏览器有用于计时器功能的API，就像用于事件ex的API一样。|4008067|‘点击’‘滚动’
|blockquote|4008068|4008069|假设您的应用程序中有以下代码|4008070|function+listener(){
++++...
}

setTimeout(listener,+300)

function+foo(){
++++for(var+i+=+0;+i+<+10000;+i%2B%2B){
++++++++console.log(i)
++++}
}

foo()|code-block|syntax|javascript|4008071|1：https://i.stack.imgur.com/j6M6b.png|offset|length|4008072|4008073|在这一点上，正如我们在上面编写的代码一样，我们的调用堆栈看起来如下|4008074|调用堆栈->+foo
|4008075|4008076|让我们假设foo需要1s来完成它的执行，因为我们已经在代码中定义了一个超时，并且在"foo“完成它的执行之前我们正在运行它，也就是说，在300‘s处|4008077|然后会发生什么呢？|4008078|javascript是否停止执行foo并开始执行setTimeout？|4008079|No|style|BOLD|4008080|我们已经知道javascript是单线程的，所以它必须在前进之前完成foo的执行，但是浏览器如何确保foo执行后"setTimeout“会执行呢？|4008081|这里，javascript魔术出现在图片中。|4008082|当300+is过期时，浏览器的"Timer+API“启动并将超时处理程序放入”消息队列“。|4008083|此时，上面图像中的“消息队列”如下所示|4008084|消息队列->+setTimout：
|4008085|4008086|和|4008087|调用堆栈->+foo
|4008088|4008089|当“调用堆栈”变为空时，也就是说foo完成了它的执行，如图中所示的“事件循环”将从消息队列中获取消息并将其推到堆栈中|4008090|“事件循环”的唯一工作是“调用堆栈”变为空，“消息队列”中有条目，然后将消息表单“消息队列”排出队列，并将其推入“调用堆栈”。|4008091|此时，上面图像中的消息队列将如|4008092|消息队列->
|4008093|4008094|4008095|调用堆栈->侦听器
|4008096|4008097|这就是setTimeout和setInterval的工作方式，尽管我们在setTimeout中指定了300+ms，它将在"foo“完成它的执行之后执行，在本例中，即在1之后执行。这就是为什么在setTimeout/setInterval中指定的计时器指示执行函数的“最小时间”延迟。|4008098|entityMap|0|LINK|mutability|MUTABLE|url|https://i.stack.imgur.com/j6M6b.png^0|0|0|0|0|0|0|2|Z|0|0|0|0|0|0|0|0|0|0|2|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|3J|B|0^^$0|@$1|2|3|4|5|6|7|2B|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|2C|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|2D|8|@]|9|@]|A|$]]|$1|G|3|-4|5|6|7|2E|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|2F|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|2G|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|2H|8|@]|9|@$Q|2I|R|2J|1|2K]]|A|$]]|$1|S|3|-4|5|6|7|2L|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|2M|8|@]|9|@]|A|$]]|$1|V|3|W|5|F|7|2N|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|2O|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|2P|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|2Q|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|2R|8|@]|9|@]|A|$]]|$1|14|3|15|5|6|7|2S|8|@$Q|2T|R|2U|16|17]]|9|@]|A|$]]|$1|18|3|19|5|6|7|2V|8|@]|9|@]|A|$]]|$1|1A|3|1B|5|6|7|2W|8|@]|9|@]|A|$]]|$1|1C|3|1D|5|6|7|2X|8|@]|9|@]|A|$]]|$1|1E|3|1F|5|6|7|2Y|8|@]|9|@]|A|$]]|$1|1G|3|1H|5|F|7|2Z|8|@]|9|@]|A|$]]|$1|1I|3|-4|5|6|7|30|8|@]|9|@]|A|$]]|$1|1J|3|1K|5|6|7|31|8|@]|9|@]|A|$]]|$1|1L|3|1M|5|F|7|32|8|@]|9|@]|A|$]]|$1|1N|3|-4|5|6|7|33|8|@]|9|@]|A|$]]|$1|1O|3|1P|5|6|7|34|8|@]|9|@]|A|$]]|$1|1Q|3|1R|5|6|7|35|8|@]|9|@]|A|$]]|$1|1S|3|1T|5|6|7|36|8|@]|9|@]|A|$]]|$1|1U|3|1V|5|F|7|37|8|@]|9|@]|A|$]]|$1|1W|3|-4|5|6|7|38|8|@]|9|@]|A|$]]|$1|1X|3|1K|5|6|7|39|8|@]|9|@]|A|$]]|$1|1Y|3|1Z|5|F|7|3A|8|@]|9|@]|A|$]]|$1|20|3|-4|5|6|7|3B|8|@]|9|@]|A|$]]|$1|21|3|22|5|6|7|3C|8|@$Q|3D|R|3E|16|17]]|9|@]|A|$]]|$1|23|3|-4|5|6|7|3F|8|@]|9|@]|A|$]]]|24|$25|$5|26|27|28|A|$29|2A]]]]

<h1>How setTimeout / setInterval work's in JavaScript</h1>
Browser has API for Timer function just like API for event ex.
<blockquote>
'click'
</blockquote>
<blockquote>
'scroll'
</blockquote>
Assume that you have following code in your application
<pre><code>function listener(){
 ...
}

setTimeout(listener, 300)

function foo(){
 for(var i = 0; i &lt; 10000; i++){
 console.log(i)
 }
}

foo()
</code></pre>
![See How Function Execution work's in javascript ][1]
[1]: https://i.stack.imgur.com/j6M6b.png
<hr />
At this point as per our code we wrote above our call stack will look like
<blockquote>
Call Stack -&gt; foo
</blockquote>
And let's assume that foo will take 1s to complete it's execution, as we already defined 1 timeout in our code and we are running it before &quot;foo&quot; complete's it's execution i.e at 300ms
What will happen then ?
Does javascript stop executing foo and start executing setTimeout ?
No
As we already know javascript is single threaded so it has to complete execution of foo before moving ahead, but how does browser ensure that after execution of foo the &quot;setTimeout&quot; will execute ?
Here javascript magic comes into picture
When 300ms is expired, the browser's &quot;Timer API&quot; kicks in and put the timeout handler into &quot;Message Queue&quot;.
At this point &quot;Message Queue&quot; in above image will look like
<blockquote>
Message Queue -&gt; setTimout:listner
</blockquote>
And
<blockquote>
Call Stack -&gt; foo
</blockquote>
And when &quot;Call Stack&quot; becomes empty i.e foo completes it's execution the &quot;Event Loop&quot; as shown in the image will take the message from message queue and push it into stack
The only job of &quot;Event Loop&quot; is when &quot;Call Stack&quot; becomes empty and &quot;Message Queue&quot; has entry in it then dequeue the message form &quot;Message Queue&quot; and push it into &quot;Call Stack&quot;
At this point Message Queue in above image will look like
<blockquote>
Message Queue -&gt;
</blockquote>
And
<blockquote>
Call Stack -&gt; listener
</blockquote>
And that's how setTimeout and setInterval works, even though we specify 300 ms in the setTimeout it will execute after &quot;foo&quot; completes it's execution in this case i.e after 1s.
And that's why timer specified in setTimeout/setInterval indicates &quot;Minimum Time&quot; delay for execution of function.

blocks|key|4008139|text|JavaScript是一种单线程脚本语言，因此它可以一次执行一段代码(由于它的单线程性质)，每个代码块都“阻塞”其他异步事件的进程。这意味着当异步事件发生时(如鼠标单击、计时器触发或XMLHttpRequest完成)，将排队等待稍后执行。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4008140|+setTimeout()+当您使用setTimeout()时，它只有在队列中轮到它时才会执行，如果由于某种原因导致的早期事件(+setTimeout)阻塞，setTimeout会比setTimeout()函数中指定的时间延迟。在执行setTimeout回调函数期间，如果发生任何事件(例如单击事件)，则会排队等待稍后执行。|offset|length|style|BOLD|4008141|setTimeout(function(){
++/*+Some+long+block+of+code...+*/
++setTimeout(arguments.callee,+10);
},+10);

setInterval(function(){
++/*+Some+long+block+of+code...+*/
},+10);|code-block|syntax|javascript|4008142|setInterval()|4008143|类似于setTimeout，但不断调用该函数(每次都会延迟)，直到它被取消为止。|unordered-list-item|4008144|事件之后，setTimeout代码总是至少有10+at的延迟。
以前的回调执行(可能会更多，但不会减少)，而setInterval将尝试每10+of执行一次回调，而不管最后一次回调是什么时候执行的。|4008145|如果计时器被阻塞，不能立即执行，它将被延迟。
直到下一个可能的执行点(这将比期望的延迟更长)。如果执行时间足够长(超过指定的时间)，则间隔可以不延迟地背靠背执行。
延迟)。|4008146|4008147|4008148|entityMap^0|0|0|E|0|0|0|D|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@$D|11|E|12|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|13|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|14|8|@$D|15|E|16|F|G]]|9|@]|A|$]]|$1|O|3|P|5|Q|7|17|8|@]|9|@]|A|$]]|$1|R|3|S|5|Q|7|18|8|@]|9|@]|A|$]]|$1|T|3|U|5|Q|7|19|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|Y|$]]

JavaScript is a single-threaded scripting language, so it can execute one piece of code at a time (due to its single-threaded nature) each of these blocks of code is “blocking” the progress of other asynchronous events. This means that when an asynchronous event occurs (like a mouse click, a timer firing, or an XMLHttpRequest completing) it gets queued up to be executed later. 

setTimeout()
 when you use setTimeout() it will execute only when its turn comes in a queue, if an earlier event (of setTimeout) blocks due to some reason setTimeout can be delayed than the specified time in setTimeout() function. during the execution of setTimeout callback function, if any event occurs(e.g click event),it gets queued up to be executed later.

<pre><code>setTimeout(function(){
 /* Some long block of code... */
 setTimeout(arguments.callee, 10);
}, 10);

setInterval(function(){
 /* Some long block of code... */
}, 10);
</code></pre>

setInterval()

<ul>
<li>Similar to setTimeout but continually calls the function (with a
delay every time) until it is canceled.</li>
<li>setTimeout code will always have at least a 10ms delay after the 
previous callback execution (it may end up being more, but never
less) whereas the setInterval will attempt to execute a callback
every 10ms regardless of when the last callback was executed.</li>
<li>If a timer is blocked from immediately executing it will be delayed 
until the next possible point of execution (which will be longer than
the desired delay). Intervals may execute back-to-back with no delay 
if they take long enough to execute (longer than the specified 
delay).</li>
</ul>

blocks|key|998415|text|就我的经验而言，如果要使用setTimeout()，函数将始终被延迟(我指的是稍后执行)，或者在未被“超时”的进一步代码之后执行。即使是具有延迟=0并由事件循环引起的函数也可能发生这种情况。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|998416|见下面的例子：|998417|setTimeout(function()+{
++++console.log('Second');
},+0)

console.log('First');|code-block|syntax|javascript|998418|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Just a note in regards to my experience, If you are going to use setTimeout(), the function will always be delayed (and I mean executed later) or executed after further code which is not 'timeouted'. This may happen even with functions which have delay = 0 and is caused by Event Loop.

See example below:

<pre><code>setTimeout(function() {
 console.log('Second');
}, 0)

console.log('First');
</code></pre>

blocks|key|998470|text|Javascript是单线程的，但浏览器不是。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|998471|有一个堆栈执行函数和语句。有一个队列，其中函数被排队等待执行。在事件表中定义了setTimeout和setInterval中定义的web，可以在特定的时间内保存该函数。|998472|当javascript引擎逐行执行js文件时，如果它发现一行语句或函数调用它在堆栈上加载并执行，但如果它是setTimeout或setInterval调用，则与setTimeout或setInterval关联的函数处理程序将由time+API+(浏览器的web之一)取出，并将其保存到该时间。|998473|一旦这一次结束，时间Api将该函数放在执行队列的末尾。|998474|现在，该函数的执行取决于其他函数调用，这些函数调用位于队列中的前面。|998475|注意:对window对象调用此函数调用。|998476|setTimeout(function+()+{console.log(this)},+300)|offset|length|style|CODE|998477|窗口{postMessage:ƒ，模糊:ƒ，焦点:ƒ，关闭:ƒ，frames:+Window，…}|blockquote|998478|998479|entityMap^0|0|0|0|0|0|0|0|1C|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Z|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|10|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|11|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|12|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|13|8|@$N|14|O|15|P|Q]]|9|@]|A|$]]|$1|R|3|S|5|T|7|16|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|17|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|W|$]]

Javascript is single threaded but browser is not.

There is 1 stack where function and statements get executed.
there is 1 queue where function are queued to be executed.
there are web APIs which can hold the function for particular time, defined in setTimeout and setInterval in event table.

when javascript engine execute js file line by line, if it finds a line as statement or function call it load it on stack and execute but if it is setTimeout or setInterval call,
then function handler associated with setTimeout or setInterval is taken out by TIME API (one of web API of browser)and hold it for that time.

Once this time is over, Time Api put that function at end of execution queue.

Now Execution of that function depends on other functions calls which are ahead of in queue.

Note: this function call is called upon window object.

<code>setTimeout(function () {console.log(this)}, 300)</code>

<blockquote>
 Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
</blockquote>

I was in an awkward situation,

I am working with pure JavaScript for almost 3 years, and I know that JavaScript is single-threaded language, 
and that you can simulate asynchronous execution using <code>setInterval</code> and <code>setTimeout</code> functions, 

but when I thought about how they can work I couldn't clearly understand it.
So how these functions affect execution context?

I suppose that in specific time runs only one part of the code and after it switches to
another part. If so, then would a lot of <code>setInterval</code> or <code>setTimeout</code>
calls affect performance?

How does setInterval and setTimeout work?

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

I 当时处境很尴尬，我在纯JavaScript上工作了近3年，我知道JavaScript是单线程语言，您可以使用setInterval和setTimeout函数模拟异步执行，但是当我想到他们怎么工作的时候，我就不明白了。那么这些函数是如何影响执行上下文的呢？我想，在特定的时间里，代码只运行一部分，然后切换到另一部分。如...

问setInterval和setTimeout是如何工作的？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问setInterval和setTimeout是如何工作的？EN