js闭包及问题的解决
- 闭包定义,作用
闭包就是能够读取其他函数内部变量的函数。
作用:一个是可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中
缺点:闭包会保存函数中的变量在内存中,导致内存消耗大
闭包会在父函数外部改变父函数内部变量的值
- 闭包与异步执行函数
前端使用异步执行的情况有
a 定时任务:setTimeOut() setInterval()
b 网络请求:ajax请求 动态<img>加载
c 时间绑定
当遇到异步的情况时,函数的输出结果:
for(var i = 1; i <= 5;i++){
setTimeout(function timer(){
console.log( i );
},i * 1000);
} //输出结果是6 6 6 6 6 6
因为,当执行setTimeOut()时,会暂时跳过这一段,放在缓冲区,当for循环执行结束之后,由于i是全局变量,此时在执行console.log( i )就会是 6,而不是预期中的0 1 2 3 4 5,解决办法通常有两种一是使用ES6中let使for循环中的变量变成块儿作用域,二就是使用立即执行函数,通过函数作用域可以保存变量的特性来将每次循环的变量 i 保存到函数中。
使用let:
for( let i = 0; i <= 5; i++){
setTimeout( function timer(){
console.log( i );
},i * 1000);
}// 输出结果 0 1 2 3 4 5
使用立即执行函数(IIFE):
for(var i = 0; i <= 5; i++){
(function(){
var j = i;
setTimeout( function timer(){
console.log( j );
}, j * 1000);
})();
}//输出结果0 1 2 3 4 5
js闭包及问题的解决的更多相关文章
- js闭包vs Java内部类
前言: 昨天写了一个关于Java内部的博客,在内部类的最后一点中谈到了Java闭包的概念,他是这样定义闭包的:闭包是一个可调用的对象,它记录了一些信息,这些信息来自创建它的作用域.结合Java的内部类 ...
- 关于js闭包之小问题大错误
闭包是 JavaScript 开发的一个关键方面:匿名函数可以访问父级作用域的变量. 如果闭包的作用域中保存着一个 HTML 元素,则该元素无法被销毁.(下面代码来自高程) 刚看到一个关于闭包自己没注 ...
- js闭包的作用
js闭包的用途详解 js闭包可以用在许多地方.它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中.具体怎么理解呢,各位看官请仔细看好下文 我们来看 ...
- js闭包之我见
很久前的一个问题终于得以解决,内心是无比喜悦的,不多说,先上代码: function test(){ for(var i=0;i<5;i++){ window.onclick=function( ...
- javascript深入理解js闭包(转)
javascript深入理解js闭包 转载 2010-07-03 作者: 我要评论 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. ...
- JS闭包的理解及常见应用场景
JS闭包的理解及常见应用场景 一.总结 一句话总结: 闭包是指有权访问另一个函数作用域中的变量的函数 1.如何从外部读取函数内部的变量,为什么? 闭包:f2可以读取f1中的变量,只要把f2作为返回值, ...
- 详解JS闭包概念
闭包理解 1. 如何产生闭包? *当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时,产生闭包 2. 闭包到底是什么? * 使用Chrome调试查看 * 理解一 ...
- js闭包的作用域以及闭包案列的介绍:
转载▼ 标签: it js闭包的作用域以及闭包案列的介绍: 首先我们根据前面的介绍来分析js闭包有什么作用,他会给我们编程带来什么好处? 闭包是为了更方便我们在处理js函数的时候会遇到以下的几 ...
- 大部分人都会做错的经典JS闭包面试题
由工作中演变而来的面试题 这是一个我工作当中的遇到的一个问题,似乎很有趣,就当做了一道题去面试,发现几乎没人能全部答对并说出原因,遂拿出来聊一聊吧. 先看题目代码: function fun(n,o) ...
随机推荐
- sprint1_11.15燃尽图(第二天)
找相关的图片资料用于做点餐系统的界面 燃尽图:
- int 和 Integer的区别
int是基本类型,默认值为0,int a=5;a只能用来计算,一般作为数值参数. Integer是引用类型,默认值为null, Integer b=5;b是一个对象,它可以有很多方法,一般做数值转换, ...
- web项目页面加载时,下拉框有值
1.我用的框架是springmvc和mybaitis 由于没有整个项目,直接就去请求的action :http://localhost:8080/ytert/test/selectStoreType ...
- 2018软工实践—Alpha冲刺(5)
队名 火箭少男100 组长博客 林燊大哥 作业博客 Alpha 冲鸭鸭鸭鸭鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调各成员之间的工作 协助测试的进行 测试项目运行的服务器环境 ...
- 团队Alpha冲刺(三)
目录 组员情况 组员1(组长):胡绪佩 组员2:胡青元 组员3:庄卉 组员4:家灿 组员5:凯琳 组员6:丹丹 组员7:家伟 组员8:政演 组员9:鸿杰 组员10:刘一好 组员11:何宇恒 展示组内最 ...
- Alpha-8
前言 失心疯病源8 团队代码管理github 站立会议 队名:PMS 530雨勤(组长) 今天完成了那些任务 20:00~23:00 代码整合,已形成可用模块,但还需适应场景局部优化 代码签入gith ...
- Ubuntu中Google Chrome安装
转载自博客 1. 方法一 1.在ubuntu中启动终端 2.在终端中,输入以下命令: sudo wget http://www.linuxidc.com/files/repo/google-c ...
- JAVA第三次笔记
- HDU 2113 Secret Number
http://acm.hdu.edu.cn/showproblem.php?pid=2113 Problem Description 有一天, KIKI 收到一张奇怪的信, 信上要KIKI 计算出给定 ...
- 组件式开发框架 craftyjs
想要少写代码,请用组件式开发吧.传统的oop,一直做着重复的事性. 先理解下概念 Entity 实体 An entity is just an ID Compone ...