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. Latex使用:在latex中添加算法模块

    在Miktex下有三个latex algorithm包,分别为:algorithm,algorithmic,algorithm2e三个,其中algorithm,algorithmic经常成套使用: l ...

  2. 一条sql语句搞定基于mysql的sql执行顺序的基本理解

    对数据库基本操作是每个程序员基本功,如何理解并快速记住sql执行的顺序呢,其实一条复杂的sql就能搞定: SELECT DISTINCT <select_list> FROM <le ...

  3. TRichEdit怎样新增的内容到最后一行?

    Delphi里使用TRichEdit,使用SetSelTextBuf时可以设置显示的字体格式,但是显示位置是在当前的插入光标后,如果人为改变插入光标的位置,比如在其他位置单,以后再插入的内容位置就没办 ...

  4. 【题解】Oulipo

    题目描述 给出两个串S1,S2(只有大写字母),求S1在S2中出现了多少次. 例如:S1=“ABA”,S2=“ABABA”,答案为2. 输入T组数据,对每组数据输出结果. 输入输出格式 输入格式 第一 ...

  5. Square Numbers UVA - 11461(水题)

    #include <iostream> #include <cstdio> #include <sstream> #include <cstring> ...

  6. c# DataGridView绑定DataTable对象之后总会多一行

    DataGridView 属性 AllowUserToAddRows = false

  7. HDU 3595 every-sg模型

    多个子游戏同时进行,每个子游戏给出两个数a,b,可以将大的数减去k倍小的数,不能操作者输. 策略就是对于一个必胜的游戏要使得步数更长,对于一个必败的游戏使得步数最短. 以下都来自贾志豪的论文.. 对于 ...

  8. CSS规范 - 优化方案--(来自网易)

    值缩写 缩写值可以减少CSS文件大小,并增加可读性和可维护性. 但并非所有的值都必须缩写,因为当一个属性的值缩写时,总是会将所有项都设置一遍,而有时候我们不希望设置值里的某些项. /* 比如我们用下面 ...

  9. ie6下的line-height属性

    line-height这个属性是被ie6所支持的. 当是当一个父级元素内的子元素,包含了文字,且文字和img,input,label,span这些内联元素连接在一起的时候,你对父级元素设置line-h ...

  10. 20155339 2016-2017-2 《Java程序设计》第6周学习总结

    20155339 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 第十章 串流设计 Java将输入/输出抽象化为串流,数据有来源及目的地,衔接两者的是串流对象 ...