for(var i=0;i<3;i++){
setTimeOut(function(){
console.log(i)
},500)
};
执行结果:3,3,3
----------------------------
JS是单线程的,意味着同一时间只能执行一条语句,所以每个JS执行代码块都会阻塞异步事件的执行,这就意味着当一个异步(鼠标点击事件,ajax,settimeout)发生的时候,他们将排在执行队列的最后等待执行.
 
所以解决方法是 写一个立即执行的匿名函数用来避免出现被for阻塞的情况:
立即执行的匿名函数写法:
(function (i){})(i);
所以上述函数应该写成:
for(var i=0;i<3;i++){
(function(i){
setTimeOut(function(){
console.log(i)
},500);
})(i);
}

关于settimeout 和for循环的更多相关文章

  1. 【转向Javascript系列】从setTimeout说事件循环模型

    本文首发在alloyteam团队博客,链接地址http://www.alloyteam.com/2015/10/turning-to-javascript-series-from-settimeout ...

  2. js: 从setTimeout说事件循环模型

    一.从setTimeout说起 setTimeout()方法不是ecmascript规范定义的内容,而是属于BOM提供的功能.查看w3school对setTimeout()方法的定义,setTimeo ...

  3. 前端开发:setTimeout与setInterval 定时器与异步循环数组

    前端开发:setTimeout与setInterval 定时器与异步循环数组 前言: 开通博客园三个月以来,随笔记录了工作中遇到的大大小小的难题,也看过无数篇令人启发的文章,我觉得这样的环境是极好的, ...

  4. 关于js中的setTimeout和setInterval

    http://ejohn.org/blog/how-javascript-timers-work 这是John的一篇博文说到setTimeout和setInterval的区别,在看js高效图形编程的时 ...

  5. Javascript中setTimeout()的用法详解

    1.SetTimeOut()       1.1 SetTimeOut()语法例子       1.2 用SetTimeOut()执行Function       1.3 SetTimeout()语法 ...

  6. setInterval()和setTimeout()的区别

    一.setInterval()函数的语法结构: setInterval(code,interval) setInterval()函数可周期性执行一段代码,也就是说代码会被周期性不断的执行下去. 函数具 ...

  7. SetTimeOut jquery的作用

    1. SetTimeOut() 1.1 SetTimeOut()语法例子 1.2 用SetTimeOut()执行Function 1.3 SetTimeOut()语法例子 1.4 设定条件使SetTi ...

  8. js中的SetTimeOut

    1. SetTimeOut()              1.1 SetTimeOut()语法例子              1.2 用SetTimeOut()执行Function           ...

  9. 以setTimeout来聊聊Event Loop

    平时的工作中,也许你会经常用到setTimeout这个方法,可是你真的了解setTimeout吗?本文想通过总结setTimeout的用法,顺便来探索javascript里面的事件执行机制. setT ...

随机推荐

  1. Reactjs+Webpack+es2015 入门HelloWord(一)

    链接,自己很久前总结的blog. https://my.oschina.net/tangyuanyu/blog/730265

  2. document.domain

    HTML DOM DOCUMENT 对象 定义和用法 domain 属性可返回下载当前文档的服务器域名. 语法 document.domain 说明 该属性是一个只读的字符串,包含了载入当前文档的 w ...

  3. bzoj 3676 回文串 manachar+hash

    考虑每个回文串,它一定是它中心字母的最长回文串两侧去掉同样数量的字符后的一个子串. 所以我们可以用manachar求出每一位的回文半径,放到哈希表里并标记出它的下一个子串. 最后拓扑排序递推就行了.. ...

  4. TypeScript 素描-基础类型

    博文读自 TypeScript 官方文档而来,不具有学习性,仅是本人学习时记录以供日后翻阅 ,有学习TypeScript的朋友还请去看更为详细的官方文档 TypeScript官网文档中的基础类型, T ...

  5. JavaScript进阶之DOM

    文档对象模型DOM 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最 ...

  6. [转]CSS 类名的单词连字符:下划线还是横杠?

    问题 CSS 类或 ID 命名时单词间连接通常有这几种写法: 驼峰式: solutionTitle.solutionDetail 用横杠连接: solution-title.solution-deta ...

  7. vue2.0---模板语法

    ***插值 #文本 数据绑定最常见的形式就是双大括号的形式: <div id="app">{{message}}</div> 只要绑定的属性message上 ...

  8. UITextField的placeholder文字的位置,颜色等的自定义设置

    //控制placeHolder的位置,左右缩20 -(CGRect)placeholderRectForBounds:(CGRect)bounds { CGRect inset = CGRectMak ...

  9. PowerDesigner连接Oracle并导出表结构

    环境:Oracle 11G(远程) + win32_11gR2_client + PowerDesigner 15 一.下载.安装.配置 1.下载地址 win32_11gR2_client客户端下载地 ...

  10. zabbix3配置短信报警

    需求:在zabbix服务器配置短信报警,当服务出现故障达到预警级别是通过发送短信的形式告诉运维人员,以便及时处理. 一.zabbix服务器端配置短信脚本 我的短信脚本放置位置为 /etc/zabbix ...