blocks|key|1768917|text|这是因为事件循环的工作方式。异步事件(如超时)将排队，并在脚本运行到完成的主体之后进行处理。这意味着它正在等待您的while循环完成，然后它才会开始查看setTimeout回调。这是您不想用长时间运行的同步代码阻止线程的原因之一，比如javascript中的巨型循环。当无限的while循环正在旋转时，什么也不会发生。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1768918|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop^0|1L|5|24|A|3U|5|V|5|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]|$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@$9|U|A|V|1|W]]|E|$]]|$1|F|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

This is because of the way the event loop works. Async events like timeouts are queued up and are processed after the main body of your script <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop" rel="noreferrer">runs-to-completion</a>. This means it is waiting for your <code>while</code> loop to finish before it evens starts looking at the <code>setTimeout</code> callbacks. This is one (of several) reasons why you don't want to block the thread with long-running synchronous code like giant loops in javascript. Nothing else can happen while your infinite <code>while</code> loop is spinning.

blocks|key|1768965|text|让我们先看看这个(无限)代码是如何执行的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1768966|CURRENT+EXECUTION+++++++++++++++++++++++++++++++WAITING+FOR+EXECUTION+(IN+QUEUE)
===================+++++++++++++++++++++++++++++================================

=>+variable+bar+is+assigned+to+a+function
=>+while+(true)
=>+call+bar()
=>+inside+bar()
=>+setTimeout+function+will+be+sent+to+queue++++=>+Execute+setTimeout’s+function+after+1000ms(1)
=>+while+(true)+++++++++++++++++++++++++
=>+call+bar()+++++++++++++++++++++++++++
=>+inside+bar()+++++++++++++++++++++++++
=>+setTimeout+function+will+be+sent+to+queue++++=>+Execute+setTimeout’s+function+after+1000ms(2)
=>+call+bar()+++++++++++++++++++++++++++
=>+inside+bar()+++++++++++++++++++++++++
=>+setTimeout+function+will+be+sent+to+queue++++=>+Execute+setTimeout’s+function+after+1000ms(3)
.
.
.+while+(true)+=>+happens+forever+++++++++++=>+waits+forever…|code-block|syntax|javascript|1768967|如果您想在无限循环中调用一个带有setTimeout的函数，那么您可以使用这样的方法，|1768968|var+bar+=+function()+{
++++setTimeout(function()+{
++++++++console.log("1");
++++++++runBar();
+++},+1000);
};

function+runBar()+{
++++bar();
}
runBar();|1768969|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Let's see first how this (infinite) code executes

<pre><code>CURRENT EXECUTION WAITING FOR EXECUTION (IN QUEUE)
=================== ================================

=&gt; variable bar is assigned to a function
=&gt; while (true)
=&gt; call bar()
=&gt; inside bar()
=&gt; setTimeout function will be sent to queue =&gt; Execute setTimeout’s function after 1000ms(1)
=&gt; while (true) 
=&gt; call bar() 
=&gt; inside bar() 
=&gt; setTimeout function will be sent to queue =&gt; Execute setTimeout’s function after 1000ms(2)
=&gt; call bar() 
=&gt; inside bar() 
=&gt; setTimeout function will be sent to queue =&gt; Execute setTimeout’s function after 1000ms(3)
.
.
. while (true) =&gt; happens forever =&gt; waits forever…
</code></pre>

If you want to call a function with a setTimeout inside an infinite loop, then you can use something like this,

<pre><code>var bar = function() {
 setTimeout(function() {
 console.log("1");
 runBar();
 }, 1000);
};

function runBar() {
 bar();
}
runBar();
</code></pre>

blocks|key|2611621|text|因为您的JavaScript代码是单线程的。无限的while循环使浏览器保持忙碌，没有时间执行其他异步函数，包括您的bar函数。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2611622|entityMap^0|1M|3|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

It's because your JavaScript code is single-threaded. The infinite while loop keeps the browser busy and no time to execute other async functions including your <code>bar</code> function.

blocks|key|1769021|text|这就是javascript中事件循环的工作方式。setTimeout()回调将添加到宏任务队列中。只有在执行过程中没有其他JavaScript或调用堆栈为空时，才会处理宏任务队列。因此，直到while循环(和它包含的代码)完成并返回到浏览器的控制之后，setTimeout()回调才能执行。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1769022|所以在example1中：|1769023|var+bar+=+function()+{
++++setTimeout(function()+{
++++++++console.log("1");
++++},+0);
};

var+count+=+4;
while(count+>+0){
++bar();
++count+--;
}|code-block|syntax|javascript|1769024|while执行完成，并将控制返回到浏览器(回调堆栈为空)，因此所有的setTimeout()回调都一个接一个地执行。|1769025|在example2中：|1769026|var+bar+=+function()+{
++setTimeout(function()+{
++++console.log("1");
++},+1000);
};

while+(true)+{
++bar();
}|1769027|它是一个无限循环，因此永远不会将控件返回给浏览器，或者调用堆栈永远不会为空，因此事件循环无法处理宏任务队列，因此永远不会执行setTimeout()回调。|1769028|entityMap^0|3I|C|0|0|0|Y|C|0|0|0|1Q|C|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|14|8|@]|D|@]|E|$]]|$1|Q|3|R|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|S|3|T|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|U|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|V|$]]

This is the way the event loops in javascript works.
The setTimeout() callbacks are being added to the macro task queue. The macrotask queue is processed only when no other JavaScript is mid-execution,or when the call stack is empty. So, the the <code>setTimeout()</code> callbacks can't execute until the while loop (and code it contains) finishes and returns control back to the browser.

So in example1:

<pre><code>var bar = function() {
 setTimeout(function() {
 console.log("1");
 }, 0);
};

var count = 4;
while(count &gt; 0){
 bar();
 count --;
}
</code></pre>

The while execution completes and returns control back to the browser(callstack is empty), so all the <code>setTimeout()</code> callbacks are executed one by one.

while in example2:

<pre><code>var bar = function() {
 setTimeout(function() {
 console.log("1");
 }, 1000);
};

while (true) {
 bar();
}
</code></pre>

it is an infinite loop, so control is never returned to the browser or the call stack is never empty, so the event loop cannot process the macrotask queue, so the <code>setTimeout()</code> callbacks are never executed.

blocks|key|696727|text|如何从无限循环调用具有setTimeout的函数？|type|blockquote|depth|inlineStyleRanges|entityRanges|data|696728|就像这样：|unstyled|696729|let+done+=+false;
let+count+=+0;

const+bar+=+()+=>+{
++setTimeout(()+=>+{
++++console.log(`bar+${count}`);
++++count%2B%2B;
++},+5);+//+delay#1
}

const+eventLoopQueue+=+()+=>+{
++return+new+Promise(resolve+=>+
++++setImmediate(()+=>+{
++++++console.log('event+loop');
++++++setTimeout(()+=>+{
++++++++if+(count+>+10)+{
++++++++++done+=+true;
++++++++}
++++++++resolve();
++++++},+5)+//delay#2+should+be+equal+or+greater+than+delay#1
++++})
++);
}

const+run+=+async+()+=>+{
++while+(!done)+{
++++bar();
++++await+eventLoopQueue();
++}
}

run().then(()+=>+console.log('Done'));|code-block|syntax|javascript|696730|输出：|696731|event+loop
bar+0
event+loop
bar+1
event+loop
bar+2
event+loop
bar+3
event+loop
bar+4
event+loop
bar+5
event+loop
bar+6
event+loop
bar+7
event+loop
bar+8
event+loop
bar+9
event+loop
bar+10
Done|696732|当您需要在长循环或无限循环中使用条件退出并访问事件(鼠标单击、任何socket.io事件等)时，这种方法是很好的。|696733|let+done+=+false;

const+eventEmitter+=+setInterval(()+=>+{
++++console.log('Hello!+Are+you+here?+Hello!');
++},+0)

//+This+setTimeout+just+ends+infinite+loop+in+some+time
//+For+demonstation+purpose+only
setTimeout(()+=>+{
++done+=+true;
++clearInterval(eventEmitter);
},+20);

//+This+gives+us+access+to+event+loop+queue
//+If+the+events+wait+in+the+queue+they+will+be+released
const+eventLoopQueue+=+()+=>+{
++return+new+Promise(resolve+=>+
++++setImmediate(()+=>+{
++++++console.log('Next+please!+How+can+I+help+you?');
++++++resolve();
++++})
++);
}

//+run+while+loop+
const+run+=+async+()+=>+{
++while+(!done)+{
++++console.log('I+am+busy!+Doing+some+work:+part+#1');+
++++await+eventLoopQueue();
++++console.log('I+am+busy!+Doing+some+work:+part+#1');
++++await+eventLoopQueue();
++++console.log('I+am+busy!+Doing+some+work:+part+#1');
++++await+eventLoopQueue();
++}
}

run().then(()+=>+console.log('Done'));|696734|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|U|8|@]|9|@]|A|$]]|$1|E|3|F|5|G|7|V|8|@]|9|@]|A|$H|I]]|$1|J|3|K|5|D|7|W|8|@]|9|@]|A|$]]|$1|L|3|M|5|G|7|X|8|@]|9|@]|A|$H|I]]|$1|N|3|O|5|D|7|Y|8|@]|9|@]|A|$]]|$1|P|3|Q|5|G|7|Z|8|@]|9|@]|A|$H|I]]|$1|R|3|-4|5|D|7|10|8|@]|9|@]|A|$]]]|S|$]]

<blockquote>
 how to call a function with a setTimeout in its body from an infinite
 loop?
</blockquote>

Like that:

<pre><code>let done = false;
let count = 0;

const bar = () =&gt; {
 setTimeout(() =&gt; {
 console.log(`bar ${count}`);
 count++;
 }, 5); // delay#1
}

const eventLoopQueue = () =&gt; {
 return new Promise(resolve =&gt; 
 setImmediate(() =&gt; {
 console.log('event loop');
 setTimeout(() =&gt; {
 if (count &gt; 10) {
 done = true;
 }
 resolve();
 }, 5) //delay#2 should be equal or greater than delay#1
 })
 );
}

const run = async () =&gt; {
 while (!done) {
 bar();
 await eventLoopQueue();
 }
}

run().then(() =&gt; console.log('Done'));
</code></pre>

Output:

<pre><code>event loop
bar 0
event loop
bar 1
event loop
bar 2
event loop
bar 3
event loop
bar 4
event loop
bar 5
event loop
bar 6
event loop
bar 7
event loop
bar 8
event loop
bar 9
event loop
bar 10
Done
</code></pre>

This approach is good when you need to do something in long or infinite loop with conditional exit and have an access to the events (mouse clicks, any socket.io events and so on).

<pre><code>let done = false;

const eventEmitter = setInterval(() =&gt; {
 console.log('Hello! Are you here? Hello!');
 }, 0)

// This setTimeout just ends infinite loop in some time
// For demonstation purpose only
setTimeout(() =&gt; {
 done = true;
 clearInterval(eventEmitter);
}, 20);

// This gives us access to event loop queue
// If the events wait in the queue they will be released
const eventLoopQueue = () =&gt; {
 return new Promise(resolve =&gt; 
 setImmediate(() =&gt; {
 console.log('Next please! How can I help you?');
 resolve();
 })
 );
}

// run while loop 
const run = async () =&gt; {
 while (!done) {
 console.log('I am busy! Doing some work: part #1'); 
 await eventLoopQueue();
 console.log('I am busy! Doing some work: part #1');
 await eventLoopQueue();
 console.log('I am busy! Doing some work: part #1');
 await eventLoopQueue();
 }
}

run().then(() =&gt; console.log('Done'));
</code></pre>

I bumped into a funny problem, I was trying to invoke a function (which has a setTimeout in its body) from an infite loop, and it was never getting called, but when the loop is changed into not infite the call was happening!!

this works :-

<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>var bar = function() {
 setTimeout(function() {
 console.log("1");
 }, 0);
};

var count = 4;
while(count &gt; 0){
 bar();
 count --;
}</code></pre>
</div>
</div>


this never works . : -

<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>var bar = function() {
 setTimeout(function() {
 console.log("1");
 }, 1000);
};

while (true) {
 bar();
}</code></pre>
</div>
</div>


can anybody explain whats going on in here!
how to call a function with a setTimeout in its body from an infinite loop?

why does the setTimeout not get called when invoked from inside an infinite while loop

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

我遇到了一个有趣的问题，我试图从infite循环中调用一个函数(它的体内有一个setTimeout )，它从来没有被调用过，但是当循环被转换成not时，调用就发生了！！此工作:-​var bar = function() {    setTimeout(function() {        console.log("...

问为什么在无限while循环中调用setTimeout时不调用
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么在无限while循环中调用setTimeout时不调用EN