setInterval小问题

先看下面代码：

  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>

巴特西

setInterval小问题

最新文章

热门文章