经常会遇到这样的问题,setTimeout按序输出循环数字,而不是最后输出同一个数字:

题目:

 for (var i = 0; i < 5; i++) {
setTimeout(function () {
console.log(i);
}, 1000 * i);
}

解决方案:

 for (var i = 0; i < 5; i++) { // 匿名函数获取值
setTimeout(function (n) {
return function () {
console.log(n);
};
}(i), 1000 * i);
}
 for (var i = 0; i < 5; i++) { // 立即执行函数
(function (n) {
return setTimeout(function () {
console.log(n);
}, 1000 * n);
})(i);
}
 for (let i = 0;i < 5;i++) { // ES6的let,使for循环内部为块级作用域
setTimeout(function() {
console.log(i);
}, 1000 * i);
}

setTimeout闭包常见问题的更多相关文章

  1. setTimeout(fn, 0)引发的JavaScipt线程的思考

    起因 周五改一个checkbox的display属性被错误地设置为none的bug. 经debug发现, 有两个地方修改了display属性: 1) checkbox的controller; 2) c ...

  2. 学JS的心路历程-闭包closure

    闭包是是纯函式语言的一个特性,也是JS的一个关键性的特色,虽然不了解也能开发程序,但我们不是这种人对吧? 闭包不仅可以减少某些高阶功能的代码数量和复杂度,并且可以让我们做到原本无法做的复杂功能.听到这 ...

  3. Web前端-JavaScript基础教程上

    Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...

  4. tet-2

      一.html和css部分 1.如何理解CSS的盒子模型? 标准盒子模型:宽度=内容的宽度(content)+ border + padding 低版本IE盒子模型:宽度=内容宽度(content+ ...

  5. js closures all in one

    js closures all in one setTimeout 闭包,log(i, arr[¡]) var, let, closures, IIFE "use strict"; ...

  6. setTimeout 学习闭包

    @(技术笔记)[css] 学习参考网站 css 网站,可供参考 javascript学习网站 var create = function (i){ return function(){ console ...

  7. setTimeout使用闭包功能,实现定时打印数值

    我们这次使用setTimeout来实现一个按照时间定时,依次打印数值的例子.其实在早期的时候,也是我经常犯的一个错误,或者实现这种能力,似乎js比较牵强,其实是我的错,哈哈!没能理解JS强大之处.我们 ...

  8. Javascript setTimeout 带参数延迟执行 闭包实现

    不是原创,只是 借鉴别人的成果,我在此纪念 1.htm function GetDateT() { var d,s; d = new Date(); s = d.getFullYear() + &qu ...

  9. 当setTimeout遇到闭包

    1: function myTest(){ for(var i=0; i< 5; i++){ setTimeout(console.log(i), 0); } } myTest(); 或者比较正 ...

随机推荐

  1. Jmeter(三十)Jmeter Question 之 循环+事务的妙用

    先提一个小问题,也是当时在对Jmeter还是懵懂之时,亲身碰到过的一个问题. 真实的业务场景---“登录一次,提交订单N次”,当然该处是两个接口. 提现接口是需要判断用户是否在线,换句话说,服务器需要 ...

  2. [UE4]Authority,网络控制权

    复制的条件 1.是否可复制开关打开 2.而且是服务器创建,或者放在关卡中. Authority,网络控制权 1.在网络游戏中,由当前进程创建的Actor,对其拥有网络控制权 2.Has Authori ...

  3. Android Gradle插件(plugin)版本(version)与Gradle、SDK Build Tools版本关系

    具体关系如下图: 比如,Android Studio 2.0发布,其中有个新功能“Instant Run”,需要Android Gradle Plugin版本2.0.0以上,那么我们项目的.gradl ...

  4. win7右键菜单调整顺序

    HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\ Discardable\PostSetup\ShellNew ...

  5. echart line 初始化隐藏legend

    echart line,当line很多,且各line的取值区间相关非常大时,多条line同时显示,其实是没有太大的可读性的,因此需要在初始化时,把部分不太重要的legend隐藏起来. 具体做法如下: ...

  6. Maven 自动下载源码和文档

    Maven下在pom中下载之后,如何才能使其自动下载源码和文档? 如果已经下载,可以先从Maven库中删除已经下载的代码,然后再update Maven项目即可

  7. Linux下Mysql的odbc配置

    在安装配置之前,需要先大概了解一下MyODBC的架构. MyODBC体系结构建立在5个组件上,如下图所示: Driver Manager: 负责管理应用程序和驱动程序间的通信,主要功能包括:解析DSN ...

  8. vue 要点

    一: 1.  如果在实例创建之后添加新的属性到实例上,它不会触发视图更新. 2.  v-show 的元素会始终渲染并保持在 DOM 中.v-show 是简单的切换元素的 CSS 属性 display.

  9. Matplotlib模块

    不求甚解,不断学习不断添加... 2017.10.26 1.绘制简单的图像 # 第一步创建显示画面,figure('show')指定图表名称 plt.figure('data') #绘制图像--> ...

  10. FileInputStream与FileOutputStream 复制文件例子代码

    try { File sourceFile = new File("C:\\Users\\prize\\Desktop\\Demo1\\盗墓笔记7.txt");//创建源文件 In ...