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语句会使 ...
随机推荐
- day 97 VUE第一天
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- apache 安装配置 (centos)
1. 使用yum包安装Apache软件 [root@Apache ~]# yum -y install httpd* [root@Apache ~]# rpm -qa | grep httpd --查 ...
- JavaScript对象的property属性详解
JavaScript对象的property属性详解:https://www.jb51.net/article/48594.htm JS原型与原型链终极详解_proto_.prototype及const ...
- viewport的深入调研
1.viewport概念:viewport就是设备的屏幕上能用来显示我们的网页的那一块区域. viewport的默认值980px或1024px等,以下是浏览器的默认viewport宽度 2.css中的 ...
- 模仿JQuery封装ajax功能
需求分析 因为有时候想提高性能,只需要一个ajax函数,不想引入较大的jq文件,尝试过axios,可是get方法不支持多层嵌套的json,post方式后台接收方式似乎要变..也许是我不太会用吧..其实 ...
- LeetCode Linked List Medium 2. Add Two Numbers
Description You are given two non-empty linked lists representing two non-negative integers. The dig ...
- java 深入剖析ThreadLocal
一.对ThreadLocal中的理解 ThreadLocal的,很多地方叫做线程本地变量,也有些地方叫做线程本地存储,其实意思差不多.可能很多朋友都知道的ThreadLocal为变量在每个线程中都创建 ...
- ng2-file-upload插件在ionic3中的使用方法
本文主要说明在ionic3中使用ng2-file-upload插件,上传多种类型文件(图片.word.excel.ppt.mp4等)的使用方法. 1.html代码: <button ion-bu ...
- Docker两个问题的讨论
docker中的container到底可不可以理解为一个操作系统? 先表明态度,我的理解是,NO. 主机级虚拟化 容器级虚拟化 容器通过Docker的守护进程(Docker daemon)来进行创建, ...
- Python 第三天学习整理2
一.常用的字符串方法 capitalize() #将字符串首字母大写 center(100,'*') #把字符串居中的 count(‘zhou’)#查询次数 endswith('.jpg ')#判断字 ...