先看下面代码：
1 for (var i = 0; i < 3; i++) { 2 setTimeout(function () { 3 console.log(i) 4 }, 1000); 5 }
运行效果是
输出了三次3，而要想输出1,2,3,可改进代码为：
1 for (var i=0;i<3;i++){ 2 (function (i) { 3 setTimeout(function () { 4 console.log(i); 5 },1000); 6 })(i); 7 }
效果：
简要说一下鄙人拙见：
第一个代码出现三次，3，的原因是，for循环时间远小于1000毫秒，所以for循环完了，计时器才运行的，获取的就是三次3.
第二个代码：添了个闭包函数，当i每次累加的时候先执行下计时器，当等于一的时候执行计时器输出1，同理出现2,3
还有就是不要在计时器嵌套for循环
所以还有一下代码：
1 var i = 0; 2 var id = setInterval(function () { 3 i++; 4 console.log(i); 5 if (i >= 12) { 6 clearInterval(id); 7 } 8 }, 100);
一个简单例子，个人感觉挺实用的。又不用嵌套for循环。。
补充2016-09-30 11:07:19
通过jQuery each()方法实现
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>each</title> 6 <script src="../base/jquery-3.1.0.js"></script> 7 <style> 8 * { 9 margin: 0; 10 padding: 0; 11 list-style: none; 12 } 13 14 .blueBg { 15 background: blue; 16 } 17 18 .whiteBg { 19 background: white; 20 } 21 </style> 22 </head> 23 <body> 24 <ul> 25 <li>内容一</li> 26 <li>内容二</li> 27 <li>内容三</li> 28 </ul> 29 </body> 30 <script> 31 $(function () { 32 var timer = null; 33 $("ul li").each(function (i) { 34 $(this).hover(function () { 35 var curLi = $(this); 36 timer = setTimeout(function () { 37 curLi.removeClass("whiteBg").addClass("blueBg"); 38 console.log(i); 39 }); 40 }, function () { 41 clearTimeout(timer); 42 $(this).removeClass("blueBg").addClass("whiteBg"); 43 }) 44 }) 45 }) 46 </script> 47 </html>