for循环，定时器，闭包。

Posted 2020-10-08 锅巴菜

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位数的时候，明显会有卡顿甚至引起浏览器奔溃。