【前端开发】关于闭包最通俗易懂的解释 for循环,定时器,闭包混合一块的那点事。
for循环,定时器,闭包混合一块的那点事。
1,对于一个基本的for循环,顺序输出变量值。 for(var i = 1; i < 4; i++){ console.log(i);//结果不多说了吧 } 2,如果for循环中有定时器,如下代码。 for (var i = 1; i < 4; i++) {
setTimeout(function() {
console.log(i);//3个4
}, 3000);
}
初衷想要3s后输出1,2,3。但是3s后,输出3个4。原因是定时器的异步执行,for循环的执行速度很快,当真正执行到函数体时,此时i早已变成4,所以结果不想而知。 3,如果要得到正确结果,就要引入闭包来保存变量i不被销毁。 for (var i = 1; i < 4; i++) {
(function(a) {
setTimeout(function() {
console.log(a);//操纵变量a,和i无关
}, 3000);
})(i)
}
这样引入闭包,变量i保存下来,3s后函数体执行,输出1,2,3. 也可以这样写 for (var i = 1; i < 4; i++) {
setTimeout(fn(i), 3000);
}
function fn(a){
return function(){
console.log(a);
}
}
4,如果要实现,没隔3s输出一个数字,即,3s输出1,3s后再输出2...,就要对定时器时间设置 for (var i = 1; i < 4; i++) {
(function(a) {
setTimeout(function() { console.log(a);
}, a*3000);
})(i)
}
实际上,for循环很快,上述代码类似于同时启动3个定时器,只需要确保时间不一样即可。在此,时间分别是3s,6s,9s,由于同时启动,但是执行时间不同,各个时间间隔都是3s。巧妙地达到了目的。
【前端开发】关于闭包最通俗易懂的解释 for循环,定时器,闭包混合一块的那点事。的更多相关文章
- 如何才能通俗易懂的解释javascript里面的"闭包"?
看了知乎上的话题 如何才能通俗易懂的解释javascript里面的‘闭包’?,受到一些启发,因此结合实例将回答中几个精要的答案做一个简单的分析以便加深理解. 1. "闭包就是跨作用域访问变量 ...
- 如何才能通俗易懂的解释js里面的‘闭包’?
1. "闭包就是跨作用域访问变量." [示例一] var name = 'wangxi' function user () { // var name = 'wangxi' fun ...
- for循环,定时器,闭包混合一块的那点事。
1,对于一个基本的for循环,顺序输出变量值. for(var i = 1; i < 4; i++){ console.log(i);//结果不多说了吧 } 2,如果for循环中有定时器,如下代 ...
- 如何才能通俗易懂地解释JS中的的"闭包"?
看了知乎上的话题 如何才能通俗易懂的解释javascript里面的‘闭包’?,受到一些启发,因此结合实例将回答中几个精要的答案做一个简单的分析以便加深理解. 1. "闭包就是跨作用域访问变量 ...
- 前端开发必须知道的JS(二) 闭包及应用
http://www.cnblogs.com/ljchow/archive/2010/07/06/1768749.html 在前端开发必须知道的JS(一) 原型和继承一文中说过下面写篇闭包,加之最近越 ...
- 前端开发必须知道的JS之闭包及应用
本文讲的是函数闭包,不涉及对象闭包(如用with实现).如果你觉得我说的有偏差,欢迎拍砖,欢迎指教. 在前端开发必须知道的JS之原型和继承一文中说过下面写篇闭包,加之最近越来越发现需要加强我的闭包应用 ...
- Web前端开发推荐阅读书籍
前言 前端工程师在中国兴起也就5年左右,以前公司里没有专门前端工程师的这个职位,很多前端方面的任务都是由全栈工程师来完成,有的基础一点的后台或者设计的帮助分担一些.但是随着互联网的快速发展,特别是所谓 ...
- 前端开发面试知识点大纲--摘自jackyWHJ
前端开发面试知识点大纲:HTML&CSS: 对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端适应 Ja ...
- 【前端福利】用grunt搭建自动化的web前端开发环境-完整教程
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...
随机推荐
- 选择排序的C、C++实现
一.选择排序 选择排序(Selection sort)是一种简单直观的排序算法.它的工作原理是每一次从待排序的数据元素中选出最小(或最大)的一个元素,存放在序列的起始位置,直到全部待排序的数据元素排完 ...
- [转帖]win10 .Net Runtime Optimization Service占用大量CPU资源解决方法
win10 .Net Runtime Optimization Service占用大量CPU资源解决方法 https://blog.csdn.net/cwg2552298/article/detail ...
- IntelliJ IDEA之如何提交代码到SVN服务器
一.准备 参照<IntelliJ IDEA教程之如何配置SVN>这篇文章配置SVN插件.提交代码到SVN之前,记得要先创建版本库,请参照<<SVN如何建立版本库>> ...
- Logback日志存放路径的问题
问题: 将一个应用程序打成了Jar包后,使用命令运行jar包,发现日志存放的路径并不统一: 比如 hello.jar 包放在 /aaa/bbb 目录下 如果在 /aaa/bbb 目录下执行:java ...
- Spring MVC 异步测试
从spring3.2开始,支持servlet3的异步请求,这对于处理耗时的请求如缓慢的数据库查询是非常有好处的,不至于很快的耗光servlet的线程池,影响可扩展性. 让我们先来了解一下servlet ...
- fgt2eth Script
fgt2eth Script explanation_on_how_to_packet_capture_for_only_certain_TCP_flags_v2.txt Packet capture ...
- photoshop cc 2018破解补丁(pscc2018注册机) 附使用方法
1.下载破解程序 破解文件自行到 http://www.ddooo.com/softdown/109954.htm 下载 博主可以到本博客的文件-->pscc2018zcj_109954.ra ...
- 【BZOJ4800】[Ceoi2015]Ice Hockey World Championship (meet in the middle)
[BZOJ4800][Ceoi2015]Ice Hockey World Championship (meet in the middle) 题面 BZOJ 洛谷 题解 裸题吧,顺手写一下... #i ...
- MySQL的COUNT()函数理解
MySQL的COUNT()函数理解 标签(空格分隔): MySQL5.7 COUNT()函数 探讨 写在前面的话 细心的朋友会在平时工作和学习中,可以看到MySQL的COUNT()函数有多种不同的参数 ...
- Mysql(二)函数与连接
一.函数 1.if函数 if(exp1, exp2, exp3) 判断exp1是否为true(不为0,并且不为nlll),如果为true,返回 exp2的值,否则返回exp3的值. selec ...