js基础进阶--关于setTimeout的思考
欢迎访问我的个人博客:http://www.xiaolongwu.cn
先热身
看看下面的额代码会打印出什么?
for (var i = 0; i < 5; i++) {
setTimeout(function () {
console.log(i);
}, 100);
}
上面的结果是 5 5 5 5 5
我对上面的代码的理解是:
setTimeout是一个注册事件,当for循环遇见他时,会先注册这个事件,而不会去触发此事件,for循环的时间很短,所以当100毫秒后触发打印事件时,此时的i已经变为5,所以会打印出5个5;
那么上面的额代码我们改如何修改才能打印出0~4呢?
for(var i = 0; i < 5; i++) {
(function(k){
setTimeout(function() {
console.log(k);
}, 100);
})(i);
}
没错,上面的代码可以打印出我们想要的结果,他的结果为0~4,可是为什么呢?
我们所采用的解决方案是闭包,闭包可以延长其私有变量的生命周期,意思就是内部私有变量和函数保存下来,一直在内存中,之后到你用时他再给你
那么我们可以再把上面的题目延伸一下
for (var i = 0; i < 5; ++i) {
setTimeout(function () {
console.log(i + ' ');
},0);
}
console.log(0);
//请看这段代码,我在for循环后面加了段代码,而且把延时器事件的触发时间改为了0,请先想想结果会是什么?
可能有会两种想法
第一种为:5 5 5 5 5 0;
第二种结果为: 0 5 5 5 5 5;
那么哪一种结果是正确的呢?
其实正确结果是第二种
那么为什么呢?因为setTimeout是异步的(是注册事件),他会先把函数注册到事件队列当中,等待主程序走完,然后再被调用。所以答案为第二种;
我的github资源地址:https://github.com/js基础进阶--关于setTimeout的思考.md
我的个人博客地址:http://www.xiaolongwu.cn
我的博客园地址:http://www.cnblogs.com/wuxiaolong555
我的CSDN博客地址:https://blog.csdn.net/wxl1555
如果您对我的博客内容有疑惑或质疑的地方,请在下方评论区留言,或邮件给我,共同学习进步。
邮箱:wuxiaolong802@163.com
js基础进阶--关于setTimeout的思考的更多相关文章
- js基础进阶--图片上传时实现本地预览功能的原理
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...
- js基础进阶--关于Array.prototype.slice.call(arguments) 的思考
欢迎访问我的个人博客:http://www.xiaolongwu.cn Array.prototype.slice.call(arguments)的作用为:强制转化arguments为数组格式,一般出 ...
- js基础进阶--编码实用技巧(二)
我的个人博客:http://www.xiaolongwu.cn 接上篇文章 js编码的实用技巧(一) 5.合理利用||运算符 使用||可以作为参数之外的默认值,当第一个参数返回值为false时,那么第 ...
- js基础进阶--编的实用技巧(一)
我的个人博客:http://www.xiaolongwu.cn 在平时的开发中,编码技巧很重要,会让你少写很多代码,起到事倍功半的效果. 下面总结几种简单的技巧,大家共同学习一下 1. 利用+.-./ ...
- JavaScript进阶 - 第2章 你要懂的规则(JS基础语法)
第2章 你要懂的规则(JS基础语法) 2-1什么是变量 什么是变量? 从字面上看,变量是可变的量:从编程角度讲,变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品 ...
- 网站开发进阶(十五)JS基础知识充电站
JS基础知识充电站 1.javascript alert弹出对话框时确定和取消两个按钮返回值? 用的不是alert对话框,是confirm confirm(str); 参数str:你要说的话或问题: ...
- js基础查漏补缺(更新)
js基础查漏补缺: 1. NaN != NaN: 复制数组可以用slice: 数组的sort.reverse等方法都会改变自身: Map是一组键值对的结构,Set是key的集合: Array.Map. ...
- js基础梳理-关于this常见指向问题的分析
首先,依然回顾<js基础梳理-究竟什么是执行上下文栈(执行栈),执行上下文(可执行代码)?>中的 3.执行上下文的生命周期 3.1 创建阶段 生成变量对象(Variable object, ...
- 前端工程师面试问题归纳(一、问答类html/css/js基础)
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
随机推荐
- 一个App与另一个App之间的交互,添加了自己的一些理解
URL Scheme 是什么? iOS有个特性就是应用将其自身"绑定"到一个自定义 URL scheme 上,该 scheme用于从浏览器或其他应用中启动本应用.常见的分享到第三方 ...
- Microsoft Dynamics CRM 2011 JS操作集锦
1.Xrm.Page.context 用户ID:getUserId() 用户角色:getUserRoles() 用户语言:getUserLcid() 组织名称:getOrgUniqueName() 组 ...
- TrueType和Bitmap字体的区别
只要标签的文本从不变化,在cocos2D中渲染TrueType和bitmap字体的性能是相同的.它们都仅仅像精灵那样绘制. 如果你希望大量的标签使用相同字体,则bitmap字体将更快.因为bitmap ...
- 【Matlab编程】生日快乐歌(显示歌词)—matlab版
clear all A4=440;%标准音A4 不同的曲调音调不同scale的取值范围不同 pt=44100;p0=pt/2;%频率 scale=A4/2^(9/12)*2.^((-12:11)/12 ...
- ERP-非财务人员的财务培训教(二)------如何评价公司/部门经营业绩
一.财务比率分析 第一节 流动性比率 第二节 经营比率 第三节 资本结构比率 第四节 获利能力比率 第五节 现金流量比率 第六节 获现能力比率 二.财务比率金字塔 第二部分 如何评价公 ...
- iOS下FMDB的多线程操作(二)
上一篇记录不使用FMDatabaseQueue来使用多线程,这一篇记录一下使用FMDatabaseQueue的方式. 需要注意的时queue操作中不能嵌套queue操作,否则会各种错误. 当使用FMD ...
- Mina源码阅读笔记(二)- IoBuffer的封装
在阅读IoBuffer源码之前,我们先看Mina对IoBuffer的描述:A byte buffer used by MINA applications. This is a replacement ...
- 近期ubuntu 14.04 cpu占用高排障
近期linux使用总是cpu达到满值, 双核cpu其中一个核总是100%,另一个核正常.top之发现输入法框架fcitx满载,直接kill之,发现搜狗输入法不能用了,随即输入如下命令: fcitx f ...
- 《转》xcode创建一个工程的多个taget,便于测试和发布多个版本
背景:很多时候,我们需要在一个工程中创立多个target,也就是说我们希望同一份代码可以创建两个应用,放到模拟器或者真机上,或者是,我们平时有N多人合作开发,当测试的时候,在A这里装了一遍测A写的那块 ...
- 80端口被NT kernel & System 占用
新年后正常上班的第一天,客户报告,虚拟机上的网站起不来了. 登录虚拟机的远程桌面,闪几下连接信息,后面就没了,不显示远程桌面.联系虚拟机管理,重启,远程桌面是连上了,网站还是起不来. 查看window ...