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问题(任务队列的问题)的更多相关文章

  1. for循环中执行setTimeout问题

    代码片段: for(var i=0;i<8;i++){ setTimeout(function () { console.log(i) },0) } 输出了8次8,这跟js的执行顺序和作用域链有 ...

  2. JS中For循环中嵌套setTimeout()方法的执行顺序

    在For循环中执行setTimeOut()方法的代码,执行顺序是怎样的呢? 代码如下 function time() { for(var i= 0;i<5;i++){ setTimeout(fu ...

  3. for循环中嵌套setTimeout,执行顺序和结果该如何理解?

    这两天在捣鼓作用域的问题,有的时候知识这个东西真的有点像是牵一发而动全身的感觉.在理解作用域的时候,又看到了一道经典的面试题和例子题. 那就是在for循环中嵌套setTimeout延时,想想之前面试的 ...

  4. 能不能在FOR循环中执行SQL?

    JDBC最基础的For循环处理SQL的方式 以及执行时间 package javaee.net.cn.jdbc; import java.sql.*; public class TestTransac ...

  5. 关于for循环中使用setTimeout

    我们先来简单了解一下setTimeout延时器的运行机制.setTimeout会先将回调函数放到等待队列中,等待区域内其他主程序执行完毕后,按时间顺序先进先出执行回调函数.本质上是作用域的问题. 因此 ...

  6. 关于for循环中使用setTimeout的四种解决方案

    我们先来简单了解一下setTimeout延时器的运行机制.setTimeout会先将回调函数放到等待队列中,等待区域内其他主程序执行完毕后,按时间顺序先进先出执行回调函数.本质上是作用域的问题. 因此 ...

  7. Python自学:第四章 在for循环中执行更多操作(2)

    # -*- coding: GBK -*- magicians = ['alice', 'david', 'carolina'] for magician in magicians: print(ma ...

  8. Python自学:第四章 在for循环中执行更多操作(1)

    # -*- coding: GBK -*- magicians = ['alice', 'david', 'carolina'] for magician in magicians: print(ma ...

  9. Java 循环中标签的作用

    continue和break可以改变循环的执行流程,但在多重循环中,这两条语句无法直接从内层循环跳转到外层循环.在C语言中,可以通过goto语句实现多重循环的跳转,但在非循环结构中使用goto语句会使 ...

随机推荐

  1. Cocos2d Box2D之静态刚体

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. b2_staticBody 在模拟环境下静态物体是不会移动的,就好像有无限大的质量.在Box2D的内部会将质量至反,存储为零.静态物体也可 ...

  2. MybatisPlus自动填充公共字段的策略

    背景:数据库中多个表有时间字段,并且字段名一致 需求:该时间字段由MybatisPlus自动插入和更新,业务代码无需处理 方法: 一.创建基础实体[BaseEntity],定义需要处理的公共字段(创建 ...

  3. JavaScript对象的property属性详解

    JavaScript对象的property属性详解:https://www.jb51.net/article/48594.htm JS原型与原型链终极详解_proto_.prototype及const ...

  4. MySQL Workbench无法显示左侧的navigator,只显示Object info和Session

    问题描述:Mac版MySQL Workbench出现异常强制退出后,再次进入后左侧的navigator消失,左侧整个导航条消失了,只显示Object info和Session. 问题根源:MySQL ...

  5. xterm.js的深入学习

    demo <template> <div id="app" class="app-box">Hello</div> < ...

  6. [fw]error: aggregate value used where an integer was expected

    一個自訂struct型態的變數,若想要轉換為unsigned,直接使用cast,gcc(version 4.4.3)編譯會回報錯誤. 例如: struct _test { unsigned hour ...

  7. 银行贷款(dp)

    链接:https://www.nowcoder.com/acm/contest/79/A来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒空间限制:C/C++ 32768K,其他语言65536KS ...

  8. 53.Coin Change(找硬币)

    Level:   Medium 题目描述: You are given coins of different denominations and a total amount of money amo ...

  9. SpringMVC学习(5):数据绑定2 @PathVariable、@CookieValue、@RequestHeader、@ModelAttribute..

    在系列(4)中我们介绍了如何用@RequestParam来绑定数据,下面我们来看一下其它几个数据绑定注解的使用方法. 1.@PathVariable 用来绑定URL模板变量值,这个我们已经在系列(3) ...

  10. Linux安装配置nfs实现共享远程目录

    1. 服务端安装nfs yum -y install nfs-utils rpcbind 2.编辑/etc/exports /etc/exports文件内容格式: <输出目录> [客户端1 ...