for(var i=1;i<=3;i++){ setTimeout(function(){ console.log(i); },0); };答案：4 4 4。
看面试题时，发现了一道较为经典的面试题，代码如下
for(var i=1;i<=3;i++){
setTimeout(function(){
console.log(i);
},0);
};
//答案：4 4 4。
很多初学者，可能会以为答案会是：1 2 3，但仔细研究，你会发现这道题涉及了异步、作用域、闭包。由于网上有很多类似的内容，故我这里就不再赘述，附上链接如下：
https://www.cnblogs.com/destinyruru/p/5823760.html
https://www.cnblogs.com/wangwenhui/p/7657654.html
解决：
var arr = [1,2,3];
for(let i = 0; i < arr.length; i++) {
setTimeout(function() {
console.log(i);
},0);
}
var arr = [1,2,3];
for(var i = 0; i < arr.length; i++) {
(function(){
var j = i;
setTimeout( function timer(){
console.log( j );
}, 0);
})();
}
参考链接：https://www.cnblogs.com/171220-barney/p/8552370.html
另外：对一堆a标签做点击事件也涉及闭包问题
window.onload = function () {
var aLink = document.getElementsByTagName("a");
var last = aLink[15]; // 福建
for (var i = 0; i < aLink.length; i++) {
// 错误方式
/*aLink[i].onclick=function(){
alert(aLink[i-1].innerText);
}*/
// 正确方式
(function (j) {
aLink[j].onclick = function () {
// 点击后 将其他背景色去除
if (last) {
last.classList.remove("selected");
}
aLink[j].classList.add("selected");
last = aLink[j];
document.getElementById("citySelected").innerText = aLink[j].innerText;
}
})(i)
}
}
当然也可以通过this解决
window.onload = function() {
var aLink = document.getElementsByTagName("a");
var last = aLink[15]; // 福建
for(var i = 0; i < aLink.length; i++) {
aLink[i].onclick = function() {
// 去除样式
if(last) {
last.classList.remove("selected");
}
// 用this表示当前对象，可避免用闭包，减少代码量
this.classList.add("selected");
last = this;
document.getElementById("citySelected").innerText = this.innerText;
}
}
}
以下为a标签点击事件demo：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, tahoma, arial, Hiragino Sans GB, \\5b8b\4f53, sans-serif;
color: #666;
} #ttbar-mycity {
margin-left: 200px;
} .shortcut_btn {
position: relative;
z-index: 21;
} li {
list-style: none;
display: list-item;
text-align: -webkit-match-parent;
} .fl {
float: left;
height: 30px;
line-height: 30px;
color: #999;
} ul {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
} .cw-icon {
height: 28px;
line-height: 28px;
} .dt {
padding-left: 7px;
padding-right: 7px;
width: 45px;
} .cw-icon {
overflow: hidden;
position: relative;
z-index: 1;
float: left;
border: 1px solid #e3e4e5;
} .iconfont {
font-family: iconfont, sans-serif;
font-style: normal;
-webkit-text-stroke-width: .2px;
-moz-osx-font-smoothing: grayscale;
} .dd {
left: 0;
width: 300px;
padding: 10px;
} .dropdown-layer {
top: 30px;
} .dd-spacer {
display: none !important;
} .ui-areamini-content-list {
overflow: hidden;
} .item {
float: left;
width: 60px;
padding: 2px 0;
} .item a {
float: left;
padding: 0 8px;
color: #999;
text-decoration: none;
} #ttbar-mycity .item a.selected {
background-color: #f10215;
color: #fff;
}
</style>
<script>
window.onload = function() {
var aLink = document.getElementsByTagName("a");
var last = aLink[15]; // 福建
for(var i = 0; i < aLink.length; i++) {
aLink[i].onclick = function() {
// 去除样式
if(last) {
last.classList.remove("selected");
}
// 用this表示当前对象，可避免用闭包，减少代码量
this.classList.add("selected");
last = this;
document.getElementById("citySelected").innerText = this.innerText;
}
}
}
</script>
</head> <body>
<ul class="fl" clstag="h|keycount|head|topbar_01">
<li class="shortcut_btn dropdown" id="ttbar-mycity">
<div class="dt cw-icon ui-areamini-text-wrap" style=""><i class="iconfont"></i><span class="ui-areamini-text" data-id="16" title="福建" id="citySelected">福建</span>
</div>
<div class="dd dropdown-layer">
<div class="dd-spacer"></div>
<div class="ui-areamini-content-wrap" style="left: auto;">
<div class="ui-areamini-content">
<div class="ui-areamini-content-list">
<div class="item">
<a data-id="1" name="city" href="javascript:void(0)">北京</a>
</div>
<div class="item">
<a data-id="2" name="city" href="javascript:void(0)">上海</a>
</div>
<div class="item">
<a data-id="3" name="city" href="javascript:void(0)">天津</a>
</div>
<div class="item">
<a data-id="4" name="city" href="javascript:void(0)">重庆</a>
</div>
<div class="item">
<a data-id="5" name="city" href="javascript:void(0)">河北</a>
</div>
<div class="item">
<a data-id="6" name="city" href="javascript:void(0)">山西</a>
</div>
<div class="item">
<a data-id="7" name="city" href="javascript:void(0)">河南</a>
</div>
<div class="item">
<a data-id="8" name="city" href="javascript:void(0)">辽宁</a>
</div>
<div class="item">
<a data-id="9" name="city" href="javascript:void(0)">吉林</a>
</div>
<div class="item">
<a data-id="10" name="city" href="javascript:void(0)">黑龙江</a>
</div>
<div class="item">
<a data-id="11" name="city" href="javascript:void(0)">内蒙古</a>
</div>
<div class="item">
<a data-id="12" name="city" href="javascript:void(0)">江苏</a>
</div>
<div class="item">
<a data-id="13" name="city" href="javascript:void(0)">山东</a>
</div>
<div class="item">
<a data-id="14" name="city" href="javascript:void(0)">安徽</a>
</div>
<div class="item">
<a data-id="15" name="city" href="javascript:void(0)">浙江</a>
</div>
<div class="item">
<a data-id="16" name="city" href="javascript:void(0)" class="selected">福建</a>
</div>
<div class="item">
<a data-id="17" name="city" href="javascript:void(0)">湖北</a>
</div>
<div class="item">
<a data-id="18" name="city" href="javascript:void(0)">湖南</a>
</div>
<div class="item">
<a data-id="19" name="city" href="javascript:void(0)">广东</a>
</div>
<div class="item">
<a data-id="20" name="city" href="javascript:void(0)">广西</a>
</div>
<div class="item">
<a data-id="21" name="city" href="javascript:void(0)">江西</a>
</div>
<div class="item">
<a data-id="22" name="city" href="javascript:void(0)">四川</a>
</div>
<div class="item">
<a data-id="23" name="city" href="javascript:void(0)">海南</a>
</div>
<div class="item">
<a data-id="24" name="city" href="javascript:void(0)">贵州</a>
</div>
<div class="item">
<a data-id="25" name="city" href="javascript:void(0)">云南</a>
</div>
<div class="item">
<a data-id="26" name="city" href="javascript:void(0)">西藏</a>
</div>
<div class="item">
<a data-id="27" name="city" href="javascript:void(0)">陕西</a>
</div>
<div class="item">
<a data-id="28" name="city" href="javascript:void(0)">甘肃</a>
</div>
<div class="item">
<a data-id="29" name="city" href="javascript:void(0)">青海</a>
</div>
<div class="item">
<a data-id="30" name="city" href="javascript:void(0)">宁夏</a>
</div>
<div class="item">
<a data-id="31" name="city" href="javascript:void(0)">新疆</a>
</div>
<div class="item">
<a data-id="52993" name="city" href="javascript:void(0)">港澳</a>
</div>
<div class="item">
<a data-id="32" name="city" href="javascript:void(0)">台湾</a>
</div>
<div class="item">
<a data-id="84" name="city" href="javascript:void(0)">钓鱼岛</a>
</div>
<div class="item">
<a data-id="53283" name="city" href="javascript:void(0)">海外</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</body> </html>
for(var i=1;i<=3;i++){ setTimeout(function(){ console.log(i); },0); };答案：4 4 4。的更多相关文章
- for(var i=0;i<=3;i++){ setTimeout(function() { console.log(i) }, 10);}
for(var i=0;i<=3;i++){ setTimeout(function() { console.log(i) }, 10);} 答案:打印4次4 这道题涉及了异步.作用域.闭包 ...
- 闭包问题for(var i=0;i<10;i++){ setTimeout(function(){ console.log(i)//10个10 },1000) }
for(var i=0;i<10;i++){ setTimeout(function(){ console.log(i)//10个10 },1000) } 遇到这种问题 如何用解决呢 for(v ...
- for(var i=0;i<5;i++){ setTimeout(function() { console.log(i) }, 100);}
涉及异步.作用域.闭包 1.settimeout是异步执行,100ms后往任务队列里面添加一个任务 2.let不仅将i绑定到for循环块中,事实上它将其重新绑定到循环体的每一次迭代中 3.闭包 set ...
- var a = {m:1}; var b = a; a.n = b ={n:1}; console.log(a);console.log(b);
var a = {m:1}; var b = a; a.n = b ={n:1}; console.log(a); console.log(b); 确定b为{n:1},所以a为 {m:1,n:{n:1 ...
- setTimeout的时间设为0的问题
javascript是单线程执行的,当某一段代码正在执行的时候,所有的后续任务都必须等待,形成一个队列, 一旦当前任务执行完毕,再从队列中取出下一个任务.这常被称为”阻塞式执行“. 如果代码中设定一个 ...
- 一道经典面试题-----setTimeout(function(){}，0)
一道经典面试题-----setTimeout(function(){},0) 转载: http://www.w3cfuns.com/notes/17398/e8a1ce8f863e8b5abb5300 ...
- setTimeout(function(){}, 0);
for (var i = 0; i < 3; i++) { setTimeout(function() { console.log(i); }, 0); console.log(i); } 结果 ...
- js中setTimeout()时间参数设置为0的探讨
起因源于一道前端笔试题: var fuc = [1,2,3]; for(var i in fuc){ setTimeout(function(){console.log(fuc[i])},0); co ...
- what's the print number means after called the setTimeout function in Chrome console?
what's the print number means after called the setTimeout function in Chrome console? javascript fun ...
随机推荐
- PostgreSQL 数据类型
数值类型 数值类型由两个字节,4字节和8字节的整数,4字节和8字节的浮点数和可选精度的小数.下表列出了可用的类型. www.yiibai.com Name Storage Size Descripti ...
- C++中返回引用和返回值的区别
转自https://www.cnblogs.com/JMLiu/p/7928425.html 一.主要讨论下面两个函数的区别: int& at() { return m_data_; } in ...
- PHP 正则表达式资料
正则表达式(regular expression)描述了一种字符串匹配的模式,可以用来检查一个串是否含有某种子串.将匹配的子串做替换或者从某个串中取出符合某个条件的子串等. 举例来说,正则表达式的一个 ...
- Apollo 1 融合 Spring 的三个入口
前言 Spring 作为 Java 世界非官方标准框架,任何一个中间件想要得到良好的发展,必须完美支持 Spring 的各种特性,即:无缝融入 Spring. Apollo 作为分布式配置中心,服务于 ...
- 如何查看oracle用户具有的权限和角色
.查看所有用户: select * from dba_users; select * from all_users; select * from user_users; .查看用户或角色系统权限(直接 ...
- 菜鸟入门【ASP.NET Core】12：JWT 设计解析及定制
前言 上一节我们讲述的书如何使用jwt token,而且上一节的token是要加Authorization:bearer XXXXXXXXXXXX才能访问. 这一节我们来研究如何自定义类似jwt的to ...
- ajax 跨域----好用的解决方案
一.前言 跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了! 但是感觉还是差了点什么,于是现在重新梳理了一下.个人见识有限,如有差错,请多多见谅 二.前言 关于跨 ...
- [PHP]算法-最大子数组问题思路
最大子数组问题,股票价格示例: 1.在最高价格开始向左寻找之前的最低价格 2.在最低价格开始向右寻找之后的最高价格 3.暴力求解法,尝试每队可能的买进和卖出组合,保证卖出在买进之后 key buy s ...
- Ajax实现的城市二级联动三
把之前2篇整合在一起 1.html <select id="province"> <option>请选择</option> </selec ...
- HTML5 template元素
前言 转自http://www.zhangxinxu.com/wordpress/2014/07/hello-html5-template-tag/ 在单页面应用,我们对页面的无刷新有了更高的要求,H ...