欢迎访问我的个人博客: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的思考的更多相关文章

  1. js基础进阶--图片上传时实现本地预览功能的原理

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...

  2. js基础进阶--关于Array.prototype.slice.call(arguments) 的思考

    欢迎访问我的个人博客:http://www.xiaolongwu.cn Array.prototype.slice.call(arguments)的作用为:强制转化arguments为数组格式,一般出 ...

  3. js基础进阶--编码实用技巧(二)

    我的个人博客:http://www.xiaolongwu.cn 接上篇文章 js编码的实用技巧(一) 5.合理利用||运算符 使用||可以作为参数之外的默认值,当第一个参数返回值为false时,那么第 ...

  4. js基础进阶--编的实用技巧(一)

    我的个人博客:http://www.xiaolongwu.cn 在平时的开发中,编码技巧很重要,会让你少写很多代码,起到事倍功半的效果. 下面总结几种简单的技巧,大家共同学习一下 1. 利用+.-./ ...

  5. JavaScript进阶 - 第2章 你要懂的规则(JS基础语法)

    第2章 你要懂的规则(JS基础语法) 2-1什么是变量 什么是变量? 从字面上看,变量是可变的量:从编程角度讲,变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品 ...

  6. 网站开发进阶(十五)JS基础知识充电站

    JS基础知识充电站 1.javascript alert弹出对话框时确定和取消两个按钮返回值? 用的不是alert对话框,是confirm confirm(str); 参数str:你要说的话或问题: ...

  7. js基础查漏补缺(更新)

    js基础查漏补缺: 1. NaN != NaN: 复制数组可以用slice: 数组的sort.reverse等方法都会改变自身: Map是一组键值对的结构,Set是key的集合: Array.Map. ...

  8. js基础梳理-关于this常见指向问题的分析

    首先,依然回顾<js基础梳理-究竟什么是执行上下文栈(执行栈),执行上下文(可执行代码)?>中的 3.执行上下文的生命周期 3.1 创建阶段 生成变量对象(Variable object, ...

  9. 前端工程师面试问题归纳(一、问答类html/css/js基础)

    一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...

随机推荐

  1. 省市联动 纯html+js

    在js里面声明所有数据,并根据html的select事件触发js实现填充对应的数据到下拉框. 代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  2. Javascript和BHO的相互调用简介

    v:* { } o:* { } w:* { } .shape { }p.MsoNormal,li.MsoNormal,div.MsoNormal { margin: 0cm; margin-botto ...

  3. 【面试笔试算法】Program 6: 字符消除(hiho题库)

    时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi最近在玩一个字符消除游戏.给定一个只包含大写字母"ABC"的字符串s,消除过程是如下进行的: 1) ...

  4. 【Matlab编程】matlab 画图

    1.  不用截图工具就可以将图保存成图像格式,并且没有背景颜色:saveas(gcf ,'outputname','png/jpg'),第三项省略时默认为fig.m文件 2.  计算形如(-1)^2/ ...

  5. SharePoint 2007 图片库视图不可用、页面标题不显示

    描述: 问题1:SharePoint新建图片库,想选择"视图"-"所有图片",选择"详细信息.幻灯片.缩略图"等视图,均没有反应.如图1. ...

  6. Android为什么使用Binder-android学习之旅(101)

    基础知识 Android进程和linux进程一样,他们只运行在进程固有的虚拟空间中.一个4GB的虚拟地址空间,其中3GB是用户空间,1GB是内核空间 ,用户空间是非共享的,内核空间是共享的,如下图: ...

  7. OpenNMS安装手册

    一. 系统需求Windows Server 2008 R2 SP1 64位JDK 8 update 5 for Windows 64位PostgreSQL 9.3.5 for Windows 64位O ...

  8. Mac电脑配置Apache服务器详细说明

    Mac电脑服务器配置过程,无论是个人学习,还是公司测试都非常实用,流程精简易懂,用于让Mac电脑做服务器方便做网络数据请求的测试. 第一步:定位到 Apache2 目录 $ cd /etc/Apach ...

  9. 收藏 - android

    收藏 - android开发 2018-05-04 16:39:36 介绍:这篇文章是收藏系列的开山第一篇,主要收藏了跟android开发有关的一些内容,也算是内容汇总,后期会持续更新: 内容目录 1 ...

  10. C#逻辑面试题汇总【不断更新中】

    (1)产生本月的月历,参考样式: 1 2 3 4 5 6 SU MO TU WE TH FR SA          01 02 03 04 05 06 07 08 09 10 11 12 13 14 ...