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循环,定时器,闭包混合一块的那点事。的更多相关文章

  1. 如何才能通俗易懂的解释javascript里面的"闭包"?

    看了知乎上的话题 如何才能通俗易懂的解释javascript里面的‘闭包’?,受到一些启发,因此结合实例将回答中几个精要的答案做一个简单的分析以便加深理解. 1. "闭包就是跨作用域访问变量 ...

  2. 如何才能通俗易懂的解释js里面的‘闭包’?

    1. "闭包就是跨作用域访问变量." [示例一] var name = 'wangxi' function user () { // var name = 'wangxi' fun ...

  3. for循环,定时器,闭包混合一块的那点事。

    1,对于一个基本的for循环,顺序输出变量值. for(var i = 1; i < 4; i++){ console.log(i);//结果不多说了吧 } 2,如果for循环中有定时器,如下代 ...

  4. 如何才能通俗易懂地解释JS中的的"闭包"?

    看了知乎上的话题 如何才能通俗易懂的解释javascript里面的‘闭包’?,受到一些启发,因此结合实例将回答中几个精要的答案做一个简单的分析以便加深理解. 1. "闭包就是跨作用域访问变量 ...

  5. 前端开发必须知道的JS(二) 闭包及应用

    http://www.cnblogs.com/ljchow/archive/2010/07/06/1768749.html 在前端开发必须知道的JS(一) 原型和继承一文中说过下面写篇闭包,加之最近越 ...

  6. 前端开发必须知道的JS之闭包及应用

    本文讲的是函数闭包,不涉及对象闭包(如用with实现).如果你觉得我说的有偏差,欢迎拍砖,欢迎指教. 在前端开发必须知道的JS之原型和继承一文中说过下面写篇闭包,加之最近越来越发现需要加强我的闭包应用 ...

  7. Web前端开发推荐阅读书籍

    前言 前端工程师在中国兴起也就5年左右,以前公司里没有专门前端工程师的这个职位,很多前端方面的任务都是由全栈工程师来完成,有的基础一点的后台或者设计的帮助分担一些.但是随着互联网的快速发展,特别是所谓 ...

  8. 前端开发面试知识点大纲--摘自jackyWHJ

    前端开发面试知识点大纲:HTML&CSS:    对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端适应 Ja ...

  9. 【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...

随机推荐

  1. HDU 2028 Lowest Common Multiple Plus

    http://acm.hdu.edu.cn/showproblem.php?pid=2028 Problem Description 求n个数的最小公倍数.   Input 输入包含多个测试实例,每个 ...

  2. 移动的调试工具vConsole

    在PC端写代码调试的时候,直接console.log()即可,但是在手机端怎么调试??最近发现一个很有用的插件vConsole 首先引入插件: 然后再文件中使用即可: 这样再手机中就会出现下面的标识, ...

  3. mybatis之DAO层自动实现接口

    * 使用mybatis举例,使用DAO接口方式实现* 不需要针对接口去编写具体的实现类代码,编写映射XML文件,直接拿来使用即可.* 1.导入jar包:mybatis和mysql-connector* ...

  4. iOS 给UIView添加xib

    2017-08-25编辑:这文章有点过时了 推荐新的文章:http://www.cnblogs.com/hero11223/p/6881848.html 一段时间没敲代码,以前一些简单的都不会做了,翻 ...

  5. 【题解】Power Strings

    题目描述 给定若干个长度小于等于10^6的字符串,询问每个字符串最多由多少个相同的子串重复连接而成.如:ababab,最多由3个ab连接而成. 输入输出格式 输入格式 若干行,每行一个字符串. 当读入 ...

  6. 简单prufer应用

    [bzoj1005] Description 自从明明学了树的结构,就对奇怪的树产生了兴趣......给出标号为1到N的点,以及某些点最终的度数,允许在任意两点间连线,可产生多少棵度数满足要求的树? ...

  7. suoi44 核能显示屏 (cdq分治)

    首先二维树状数组肯定开不下 仿照二维树状数组的做法,如果有差分数组$d[i][j]=a[i][j]-a[i-1][j]-a[i][j-1]+a[i-1][j-1]$,那么就有: $$sum[x][y] ...

  8. 2019.2.28&2019.3.1 考试

    因为没A/改几道题,就一起写了 题目在LOJ上都能找到 2019.2.28 100+20+12 前两个小时一直在睡觉+想题也没思路,我太菜了 T1 洗衣服 分开处理出洗衣服和烘干的时间,然后一边正着排 ...

  9. Pair_2测试与优化

    # Pair_2测试与优化 211606316李震 21160305胡彤 一.预估与实际 PSP2.1 Personal Software Process Stages 预估耗时(分钟) 实际耗时(分 ...

  10. 将句子表示为向量(上):无监督句子表示学习(sentence embedding)

    1. 引言 word embedding技术如word2vec,glove等已经广泛应用于NLP,极大地推动了NLP的发展.既然词可以embedding,句子也应该可以(其实,万物皆可embeddin ...