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. BFC的布局规则以及触发条件

          1   .BFC的含义 :          Block Formatting Contexts(BFC)                                      块级元 ...

  2. 北京培训记day5

    高级数据结构 一.左偏树&斜堆 orz黄源河论文 合并,插入,删除根节点 打标记 struct Node { int fa,l,r,w,dep } tree[Mx]; int Merge(in ...

  3. angular服务一

    angular服务 [$apply()] jquery内数据绑定 要用$apply(),不然不能在js内通过angular绑定数据 <!DOCTYPE html> <html lan ...

  4. ueditor工具栏新增按钮教程

    我做了一个人博客网站想要一段文字高亮显示,大概是这样: 但是ueditor上面的代码语言是一大块的<pre></pre>标签,觉得不合适,就在网上搜索相关文章,自己结合着实现了 ...

  5. javascript 数字格式化

    对数字进行格式化输出,是非常有意义的一件事情,例如许多时候,我们希望一个数字能够输出为指定格式的字符串,拿25.9878来说,我们可能会希望它能保留两位小数来说出,即结果为25.99,或者对于0.34 ...

  6. mybatis- spring 批量实现数据导入数据库

    终于实现了ibatis的批量插入,此方法插入3000条数据,比单条插入可以节省一半的时间XML代码: <insert id="insertBatch" parameterTy ...

  7. form表单的属性标签和练习

    form表单的标签 做一个如下图的form表单: 我们的代码如下: <body leftmargin="400px" topmargin="200px"& ...

  8. InputStream、InputStreamReader和Reader的关系

    InputStream:得到的是字节输入流,InputStream.read("filename")之后,得到字节流 Reader:读取的是字符流 InputStreamReade ...

  9. JavaScript闭包浅谈

    ------------------- 作者:willingtolove: 本文链接:http://www.cnblogs.com/willingtolove/p/4745889.html 1. 变量 ...

  10. phpcms 添加memcache支持

    1,修改caches/configs/cache.php <?php return array ( 'file1' => array ( 'type' => 'file', 'deb ...