for循环+setTimeout的延迟操作
例子:
for (var i = 0; i < 5; i++) {
setTimeout(function () {
console.log(i);
}, 100)
}
上述代码,输出结果显而易见是5个5,且并没有任何的延迟效果。那么为什么呢?
首先这样的结果需要从JS的执行机制说起。JS是单线程环境,也就是说代码的执行是从上到下,依次执行。这样的执行称为同步执行。因为种种不要浪费和节约的原因。JS中引进了异步的机制。在这段代码中,哪个是同步哪个是异步呢?for循环是同步代码,而setTimeout中的是异步代码。那么JS碰到这个有同步和异步的情况下会先从上到下执行同步代码,碰到异步的代码会将其插入到任务队列当中等待。而setTimeout是延时,也就是说碰到setTimeout这个异步的代码块会根据它里面的第二个参数:延时时间来将代码插入到任务队列当中,比如上面这段代码中,第二个参数延时时间是100,也就是说执行到它的时候会在100ms之后将它插入到任务队列当中。同步代码都执行完成之后,那么JS引擎就空闲了,这个时候就轮到任务队列中的异步代码依次加载了。
这是上面这段代码的答案的一半。另一半就来自于作用域,作用域是变量等资源的作用范围。在这段代码中准确的说是作用域链的问题,当同步代码执行完毕开始执行异步的setTimeout代码时,setTimeout中需要一个变量i,而执行的时候在当前的作用域中开始找,找不到变量i的定义,这个时候就把创建这个函数的作用域作为当前作用域,再次寻找,创建这个函数的作用域就是全局作用域,也就是找到了for循环中i,找到了之后就结束寻找变量i的行程。由于这个时候的i是全局的,而且人家已经变为了最终形态:5,setTimeout找到的就是这个i=5;所以就输出了5,下面的4次setTimeout 的执行都是类似,所以结果都是5;
所以我对这个答案的理解归结起来就是 异步加载+作用域链。
正确写法:
for (var i = 0; i < 5; i++) {
(function (i) {
setTimeout(function () {
console.log(i);
}, 100 * i);
})(i);
}
将延迟操作闭包,立即执行。
for循环+setTimeout的延迟操作的更多相关文章
- for循环 + setTimeout 结合的烂大街的面试题
零.背景 最近在翻看以前的老书<node.js开发指南>,恰好碰到for循环 + setTimeout的经典例子,于是重新梳理了思路并记录下. 一.写在前面,setTimeout和setI ...
- [从源码学设计]蚂蚁金服SOFARegistry之延迟操作
[从源码学设计]蚂蚁金服SOFARegistry之延迟操作 0x00 摘要 SOFARegistry 是蚂蚁金服开源的一个生产级.高时效.高可用的服务注册中心. 本系列文章重点在于分析设计和架构,即利 ...
- js获取时间,循环执行任务,延迟执行任务
一.获取时间 核心方法创建一个时间对象:new Date() 时间对象相关操作 时间对象.函数名 函数名 功能 getYear() 获取四位数的年份 getMonth() 获取2位数的月数, 这个是从 ...
- 数据结构--线段树--lazy延迟操作
A Simple Problem with Integers Time Limit: 5000MS Memory Limit: 131072K Total Submissions: 53749 ...
- 关于for循环与setTimeout的延迟
在for循环中使用setTimeout时,想使其每个setTimeout在上一个setTimeout的基础上进行延时,使用传入数组方式设置时间时,发现实际是按照每次设置的setTimeout的延时执行 ...
- 深浅拷贝, for循环小知识点 str操作 list的删除问题,类型转换
深浅拷⻉ : lst1 = ["⾦⽑狮王", "紫衫⻰王", "⽩眉鹰王", "⻘翼蝠王"] lst2 = lst1 ...
- python2学习------基础语法1 (变量、分支语句、循环语句、字符串操作)
1.变量类型 Numbers(数字):int,float,long String(字符串) List(列表) tuple(元组) dict(字典) bool(布尔):True,False # 删除变量 ...
- JavaScript循环和数组常用操作
while循环 语法: do while循环 语法:do{循环体}while(条件表达式); 特点:do while循环不管条件是否成立,无论如何循环体都会执行一次. 使用场合:用户输入密码,如果密码 ...
- 循环时的dom操作
<body> <div id="resText"></div> <div id="reshtml"></d ...
随机推荐
- ASP 读取Word文档内容简单示例_组件开发_新兴网络_20161014161610.jpg
- 配置sudo命令行为审计
1.检查是否安装 rpm -aq sudo rsyslog #检验是否安装此软件 ***如果没有需执行(yum install sudo rsyslog -y)安装*** 2.配置审计 echo &q ...
- j2ee消息中间件
http://blog.csdn.net/apanious/article/details/51014396
- 原生js,一些小应用(逢10进一,生成V字,多个div抖动)
第一题:每隔10个div换一行.并且鼠标移入 改变opacity. <!DOCTYPE html> <html lang="en"> <head> ...
- sso 系统分析
一.什么是 sso 系统 SSO 英文全称 Single Sign On,单点登录.SSO 是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.它包括可以将这次主要的登录映射到其他 ...
- jQuery(基本事件)
- 转载:手游安全破“黑”行动:向黑产业链说NO
目前的手游市场已被称为红海.从业界认为的2013年的“手游元年”至今,手游发展可谓是既经历了市场的野蛮生长,也有百家争鸣的战国时代.如今,手游市场竞争已趋白热化,增长放缓.但移动互联网的发展大势之下, ...
- 在ActivityA中关闭还有一个ActivityB
1.对于简单的两个Activity public class A_activity extends Activity { public static A_activity _instance = nu ...
- POJ--1087--A Plug for UNIX【Dinic】网络最大流
链接:http://poj.org/problem? id=1087 题意:提供n种插座.每种插座仅仅有一个,有m个设备须要使用插座,告诉你设备名称以及使用的插座类型,有k种转换器.能够把某种插座类型 ...
- Unity3D 人形血条制作小知识
这几天用Unity3D做个射击小游戏,想做个人形的血条.百思不得其解,后来问了网上的牛牛们,攻克了,事实上挺简单的,GUI里面有个函数DrawTextureWithTexCoords就能够实现图片的裁 ...