blocks|key|3637815|text|您忽略了JavaScript内部结构的一个关键特性:事件循环。所有的函数都存储在那里，并等待它们被执行。此外，JavaScript+(通常不包括AJAX和workers)是单线程的，所以在任何时候，只执行一个函数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3637816|关于您的脚本:事件队列上的第一个函数是您的ready()回调。它被执行，同时将许多其他函数(来自setTimeout()调用的回调)放在事件队列中。但是为了执行这些函数，第一个函数必须完成，这意味着所有的循环都必须完成，函数必须返回。|offset|length|style|CODE|3637817|因此，基本上会发生这种情况(每个项目符号中的第二行表示当前事件循环状态)：|3637818|3637819|只有ready回调被排队等待执行。|ordered-list-item|3637820|3637821|ready()-callback|3637822|3637823|将setTimeout()回调放到事件队列中。|3637824|3637825|setTimeout()-callback+()-callback%7Cready|3637826|3637827|所有的循环都完成了。|3637828|3637829|setTimeout()-callback+()-callback%7Cready|3637830|3637831|+ready()回调已完成并从队列中删除。|3637832|3637833|setTimeout()-callback|3637834|3637835|刚才执行了setTimeout()回调，你会看到你的alert()消息！|3637836|3637837|3637838|3637839|因此，为了在循环执行之间的某个位置获得alert()，您要么必须在第2500次迭代之后执行它：|3637840|$(document).ready(function(){
++++var+k+=+0;
++++for+(var+i+=+0;+i+<+5000;+%2B%2Bi)+{
++++++++%2B%2Bk;
++++++++$('.inner').append('Test'+%2B+k.toString());
++++++++if(+i+==+2500+)+{
++++++++++alert(+'Hello'+);
++++++++}
++++}
});|code-block|syntax|javascript|3637841|或者将所有这些插入也放在setTimeout()回调中(如果您想访问外部k，则需要某种闭包)：|3637842|$(document).ready(function(){
++++var+k+=+0;
++++setTimeout(function(){alert("Hello")},500);
++++for+(var+i+=+0;+i+<+5000;+%2B%2Bi)+{
++++++++%2B%2Bk;
++++++++setTimeout(+(function(+k+)+{+
++++++++++$('.inner').append('Test'+%2B+k.toString());
++++++++})(+k+),+0+);
++++}
});|3637843|entityMap^0|0|L|7|1C|C|0|0|0|2|5|0|0|0|0|1|C|0|0|0|0|0|0|0|0|1|7|0|0|0|0|5|C|Q|7|0|0|0|0|J|7|0|0|C|C|10|1|0|0^^$0|@$1|2|3|4|5|6|7|1R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1S|8|@$D|1T|E|1U|F|G]|$D|1V|E|1W|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1X|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|1Z|8|@$D|20|E|21|F|G]]|9|@]|A|$]]|$1|N|3|-4|5|6|7|22|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|23|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|24|8|@]|9|@]|A|$]]|$1|R|3|S|5|M|7|25|8|@$D|26|E|27|F|G]]|9|@]|A|$]]|$1|T|3|-4|5|6|7|28|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|29|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|2A|8|@]|9|@]|A|$]]|$1|X|3|Y|5|M|7|2B|8|@]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|2C|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|2D|8|@]|9|@]|A|$]]|$1|12|3|-4|5|6|7|2E|8|@]|9|@]|A|$]]|$1|13|3|14|5|M|7|2F|8|@$D|2G|E|2H|F|G]]|9|@]|A|$]]|$1|15|3|-4|5|6|7|2I|8|@]|9|@]|A|$]]|$1|16|3|17|5|6|7|2J|8|@]|9|@]|A|$]]|$1|18|3|-4|5|6|7|2K|8|@]|9|@]|A|$]]|$1|19|3|1A|5|M|7|2L|8|@$D|2M|E|2N|F|G]|$D|2O|E|2P|F|G]]|9|@]|A|$]]|$1|1B|3|-4|5|6|7|2Q|8|@]|9|@]|A|$]]|$1|1C|3|17|5|6|7|2R|8|@]|9|@]|A|$]]|$1|1D|3|-4|5|6|7|2S|8|@]|9|@]|A|$]]|$1|1E|3|1F|5|6|7|2T|8|@$D|2U|E|2V|F|G]]|9|@]|A|$]]|$1|1G|3|1H|5|1I|7|2W|8|@]|9|@]|A|$1J|1K]]|$1|1L|3|1M|5|6|7|2X|8|@$D|2Y|E|2Z|F|G]|$D|30|E|31|F|G]]|9|@]|A|$]]|$1|1N|3|1O|5|1I|7|32|8|@]|9|@]|A|$1J|1K]]|$1|1P|3|-4|5|6|7|33|8|@]|9|@]|A|$]]]|1Q|$]]

You miss one key feature of the JavaScript internal structure: The event loop. All functions get stored there and wait until they get executed. Furthermore, JavaScript (in general - leaving out AJAX and workers) is single threaded, so at any time, just one function gets executed.

With respect to your script: The first function on the event queue is your <code>ready()</code> callback. It gets executed and while doing so places many other functions (the callbacks from the <code>setTimeout()</code> call) on the event queue. But in order to execute those, the first function has to be finished, meaning all the loop has to be done and the function has to return.

So basically this happens (the second row in each bullet point denotes the current event loop state):

<ol>
<li>Just the <code>ready</code> callback is queued for execution.

<blockquote>
 ready()-callback
</blockquote></li>
<li>The <code>setTimeout()</code> callback gets placed on the event queue.

<blockquote>
 ready()-callback | setTimeout()-callback
</blockquote></li>
<li>All the looping is done.

<blockquote>
 ready()-callback | setTimeout()-callback
</blockquote></li>
<li>The <code>ready()</code> callback has finished and is removed from the queue.

<blockquote>
 setTimeout()-callback
</blockquote></li>
<li>Just now the <code>setTimeout()</code> callback is executed and you see your <code>alert()</code> message!

<blockquote>
 setTimeout()-callback
</blockquote></li>
</ol>

<hr>

So in order to get your <code>alert()</code> somewhere in between the loop execution, you either have to execute it after, e.g., the 2500th iteration:

<pre><code>$(document).ready(function(){
 var k = 0;
 for (var i = 0; i &lt; 5000; ++i) {
 ++k;
 $('.inner').append('&lt;p&gt;Test&lt;/p&gt;' + k.toString());
 if( i == 2500 ) {
 alert( 'Hello' );
 }
 }
});
</code></pre>

Or put all those inserts in <code>setTimeout()</code> callbacks too (which require some kind of closure, if you want to access the outside <code>k</code>):

<pre><code>$(document).ready(function(){
 var k = 0;
 setTimeout(function(){alert("Hello")},500);
 for (var i = 0; i &lt; 5000; ++i) {
 ++k;
 setTimeout( (function( k ) { 
 $('.inner').append('&lt;p&gt;Test&lt;/p&gt;' + k.toString());
 })( k ), 0 );
 }
});
</code></pre>

blocks|key|3637890|text|是的，这是一个语言问题。JavaScript中的setTimeout在指定的毫秒数后执行代码，在本例中为500。它将脚本排入队列，然后继续执行下一行代码，因此执行您的循环，而线程将等待500ms来执行您的警报。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3637891|如果希望for循环在500毫秒后运行，请执行以下操作|3637892|setTimeout(function(){
++++for+(var+i+=+0;+i+<+5000;+%2B%2Bi)+{
++++++++%2B%2Bk;
++++++++$('.inner').append('Test'+%2B+k.toString());
++++}
},500);|code-block|syntax|javascript|3637893|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|$]]

Yes, its a language issue. A setTimeout in JavaScript executes the code after the number of milliseconds specified, in your case 500. It queues the script and goes on to execute the next line of code and therefore your loop is executed while the thread will wait for 500 ms to execute your alert.

If you want the for loop to run after 500 ms do this

<pre><code>setTimeout(function(){
 for (var i = 0; i &lt; 5000; ++i) {
 ++k;
 $('.inner').append('&lt;p&gt;Test&lt;/p&gt;' + k.toString());
 }
},500);
</code></pre>

I have made the following program on jQuery:

<pre><code>$(document).ready(function(){
 var k = 0;
 setTimeout(function(){alert("Hello")},500);
 for (var i = 0; i &lt; 5000; ++i) {
 ++k;
 $('.inner').append('&lt;p&gt;Test&lt;/p&gt;' + k.toString());
 }
});
</code></pre>

I expected that the timer event will execute the function which alerts "Hello" string during the execution of the loop. However it happens only after the loop is finished.

Is it the language specific issue? How should I implement the callback function handling while being inside of some loop/execution?

Javascript event handling while inside of loop

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

我在jQuery上做了以下程序：$(document).ready(function(){ var k = 0; setTimeout(function(){alert("Hello")},500); for (var i = 0; i < 5000; ++i) { ++k; ...

问循环内的Javascript事件处理
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问循环内的Javascript事件处理EN