for循环中执行setTimeout问题(任务队列的问题)
for(var i=0;i<8;i++){
setTimeout(function () {
console.log(i)
},0)
}
输出了8次8,这跟js的执行顺序和作用域链有关。
规则:
同步优先、异步靠边、回调垫底。
用公式表达就是:同步 => 异步(定时器 or 异步请求) => 回调
1、js同步执行与异步执行
js的执行机制: js是单线程环境,从上到下、依次执行,即 同步执行;在这段代码中,for循环是同步代码,setTimeout是异步代码。
js在执行代码的过程中,碰到同步代码会依次执行,碰到异步代码就会将其放入任务队列中进行等待,当同步代码执行完毕后再开始执行异步代码,即 异步执行。
2、js作用域问题
当同步代码执行完毕后,开始执行异步的setTimeout代码,执行setTimeout时需要从当前作用域内寻找一个变量 i ,此时for循环已执行完毕,当前 i=8,所以执行setTimeout时输出为8,任务队列中的剩余7个setTimeout也依次执行,输出为8。
3、常用解决方法
利用立即执行函数,当for循环执行时,就会立即执行setTimeout,从而使得到的每个副本i值都不一样,这样就可以得到想要的for循环的结果。如:
for(var i=0;i<8;i++){
(function (x) {
setTimeout(function () {
console.log(x)
},0)
})(i);
}
参考:
https://blog.csdn.net/ld767416042/article/details/84030668
https://www.cnblogs.com/wangwenhui/p/7657654.html
https://blog.csdn.net/huakaiwuxing/article/details/78968642
https://baijiahao.baidu.com/s?id=1621653715044760064&wfr=spider&for=pc
https://blog.csdn.net/u010297791/article/details/71158212
https://blog.csdn.net/jssy_csu/article/details/78627628

for循环中执行setTimeout问题(任务队列的问题)的更多相关文章
- for循环中执行setTimeout问题
代码片段: for(var i=0;i<8;i++){ setTimeout(function () { console.log(i) },0) } 输出了8次8,这跟js的执行顺序和作用域链有 ...
- JS中For循环中嵌套setTimeout()方法的执行顺序
在For循环中执行setTimeOut()方法的代码,执行顺序是怎样的呢? 代码如下 function time() { for(var i= 0;i<5;i++){ setTimeout(fu ...
- for循环中嵌套setTimeout,执行顺序和结果该如何理解?
这两天在捣鼓作用域的问题,有的时候知识这个东西真的有点像是牵一发而动全身的感觉.在理解作用域的时候,又看到了一道经典的面试题和例子题. 那就是在for循环中嵌套setTimeout延时,想想之前面试的 ...
- 能不能在FOR循环中执行SQL?
JDBC最基础的For循环处理SQL的方式 以及执行时间 package javaee.net.cn.jdbc; import java.sql.*; public class TestTransac ...
- 关于for循环中使用setTimeout
我们先来简单了解一下setTimeout延时器的运行机制.setTimeout会先将回调函数放到等待队列中,等待区域内其他主程序执行完毕后,按时间顺序先进先出执行回调函数.本质上是作用域的问题. 因此 ...
- 关于for循环中使用setTimeout的四种解决方案
我们先来简单了解一下setTimeout延时器的运行机制.setTimeout会先将回调函数放到等待队列中,等待区域内其他主程序执行完毕后,按时间顺序先进先出执行回调函数.本质上是作用域的问题. 因此 ...
- Python自学:第四章 在for循环中执行更多操作(2)
# -*- coding: GBK -*- magicians = ['alice', 'david', 'carolina'] for magician in magicians: print(ma ...
- Python自学:第四章 在for循环中执行更多操作(1)
# -*- coding: GBK -*- magicians = ['alice', 'david', 'carolina'] for magician in magicians: print(ma ...
- Java 循环中标签的作用
continue和break可以改变循环的执行流程,但在多重循环中,这两条语句无法直接从内层循环跳转到外层循环.在C语言中,可以通过goto语句实现多重循环的跳转,但在非循环结构中使用goto语句会使 ...
随机推荐
- Cocos2d Box2D之静态刚体
| 版权声明:本文为博主原创文章,未经博主允许不得转载. b2_staticBody 在模拟环境下静态物体是不会移动的,就好像有无限大的质量.在Box2D的内部会将质量至反,存储为零.静态物体也可 ...
- MybatisPlus自动填充公共字段的策略
背景:数据库中多个表有时间字段,并且字段名一致 需求:该时间字段由MybatisPlus自动插入和更新,业务代码无需处理 方法: 一.创建基础实体[BaseEntity],定义需要处理的公共字段(创建 ...
- JavaScript对象的property属性详解
JavaScript对象的property属性详解:https://www.jb51.net/article/48594.htm JS原型与原型链终极详解_proto_.prototype及const ...
- MySQL Workbench无法显示左侧的navigator,只显示Object info和Session
问题描述:Mac版MySQL Workbench出现异常强制退出后,再次进入后左侧的navigator消失,左侧整个导航条消失了,只显示Object info和Session. 问题根源:MySQL ...
- xterm.js的深入学习
demo <template> <div id="app" class="app-box">Hello</div> < ...
- [fw]error: aggregate value used where an integer was expected
一個自訂struct型態的變數,若想要轉換為unsigned,直接使用cast,gcc(version 4.4.3)編譯會回報錯誤. 例如: struct _test { unsigned hour ...
- 银行贷款(dp)
链接:https://www.nowcoder.com/acm/contest/79/A来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒空间限制:C/C++ 32768K,其他语言65536KS ...
- 53.Coin Change(找硬币)
Level: Medium 题目描述: You are given coins of different denominations and a total amount of money amo ...
- SpringMVC学习(5):数据绑定2 @PathVariable、@CookieValue、@RequestHeader、@ModelAttribute..
在系列(4)中我们介绍了如何用@RequestParam来绑定数据,下面我们来看一下其它几个数据绑定注解的使用方法. 1.@PathVariable 用来绑定URL模板变量值,这个我们已经在系列(3) ...
- Linux安装配置nfs实现共享远程目录
1. 服务端安装nfs yum -y install nfs-utils rpcbind 2.编辑/etc/exports /etc/exports文件内容格式: <输出目录> [客户端1 ...