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