setInterval小问题

先看下面代码：

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>