码迷,mamicode.com
首页 > 其他好文 > 详细

for循环,定时器,闭包。

时间:2017-09-27 18:55:10      阅读:247      评论:0      收藏:0      [点我收藏+]

标签:html   move   启动   nbsp   func   个数   大于   ons   设置   

1,对于一个基本的for循环,顺序输出变量值。

        for(var i = 0; i < 4; i++){
            console.log(i);//结果不多说了吧
        }

 2,如果for循环中有定时器,如下代码。

        for (var i = 0; i < 5; i++) {
            setTimeout(function() {
                console.log(i);
            }, 1000*i);
        }

setTimeout 会延迟执行,那么执行到 console.log 的时候,其实 i 已经变成 5 了,开始输出一个 5(1000*0),然后每隔一秒再输出一个 5,一共 5 个 5。”

3,如果要得到每一秒输出i的正确结果,就要引入闭包来保存变量i不被销毁。

    
  for (var i = 0; i < 5; i++) {
    (function(i) {
      setTimeout(function() {
        console.log(i);
      }, i * 1000);
    })(i);
  }

  

4,如果要实现,每隔3s输出一个数字,即,3s输出1,3s后再输出2...,就要对定时器时间设置

 
        for (var i = 0; i < 4; i++) {
            (function(a) {
                setTimeout(function() {
                    console.log(a);
                }, a*3000); //.....
            })(i)
        }
 

       实际上,for循环很快,上述代码类似于同时启动3个定时器,只需要确保时间不一样即可。在此,时间分别是3s,6s,9s,由于同时启动,但是执行时间不同,各个时间间隔都是3s。巧妙地达到了目的。

      案例4的实际用处如下:

 

  for (var i = 0; i < 1000; i++) {
    (function(a) {
      setTimeout(function() {
        console.log(a);
        $(‘#div1‘).removeClass().addClass(‘r‘+a);
        $(‘#div1‘).html(a);
      }, a*60);
    })(i)
  }

 

 但是在数字大于5位数的时候,明显会有卡顿甚至引起浏览器奔溃。

 

for循环,定时器,闭包。

标签:html   move   启动   nbsp   func   个数   大于   ons   设置   

原文地址:http://www.cnblogs.com/gggwf/p/7602893.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!