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 ...
随机推荐
- leetcode — two-sum-ii-input-array-is-sorted
import java.util.ArrayList; import java.util.List; /** * Source : https://oj.leetcode.com/problems/m ...
- laravel C层接收数据的步骤
use Illuminate\Http\Request; function fun(Request $request){ //获取修改的数据 $arr = $request->all(); // ...
- jQuery validate and groups - how to avoid errorPlacement usage?
本文参照:https://stackoverflow.com/questions/14146893/using-groups-with-jquery-form-validation-how 指定错误提 ...
- layUI Tree 的使用
原文作者:小巷而已 [[layui-xtree 3.0]依赖layui form模块 复选框tree插件] 原文链接: https://blog.csdn.net/xianglikai1/articl ...
- Dependency Walker使用说明 转载
转载地址:http://blog.csdn.net/swort_177/article/details/5426848?reload 在Windows世界中,有无数块活动的大陆,它们都有一个共同的名字 ...
- 了解java虚拟机—G1回收器（9）
G1(Garbage-First)回收器是在JDK1.7中正式使用的全新垃圾回收器,G1拥有独特的垃圾回收策略,从分代上看,G1依然属于分代垃圾回收器,它会区分年代和老年代,依然有eden和survi ...
- char *s="string"和char s[]="string"的区别
char *s="string"的内容是不可以改的 void main() { char* pStr1 = "Hello!"; char pSt ...
- Linux 学习记录 四(Bash 和 Shell scirpt).
一.什么是 Shell? 狭义的shell指的是指令列方面的软件,包括基本的Linux操作窗口Bash等,广义的shell则包括 图形接口的软件,因为图形接口其实也可以操作各种驱动程序来呼叫核心进行工 ...
- 漫画｜你还记得原生的JDBC怎么连接数据库吗？
数据表的设计范式 在实际开发中最为常见的设计范式有三个: 第一范式是最基本的范式.如果数据库表中的所有字段值都是不可分解的原子值,就说明该数据库表满足了第一范式: 第二范式需要确保数据库表中的每一列都 ...
- python爬虫入门---第三篇：保存一张图片
import requests import os url = 'http://imgsrc.baidu.com/forum/w%3D580%3B/sign=749ed018cecec3fd8b3ea ...