JavaScript 闭包、定时器

闭包及其作用

• 闭包是能够读取其他函数内部变量的函数；相当于在草原上用栅栏单独围一片地只留一个进出口；只有通过返回出的函数才能去修改其内部的变量。
• 有两个作用：①读取/修改其他函数内部的变量，形成单独的一个空间，不受外部影响，可用于封装。②使其他函数内部的变量不会被销毁而始终存在于内存中。

setTimeout 0 的作用

• setTimeout 0 的作用并不在于其延时0的这个字面意思，而是js对它的处理机制上；对被setTimeout包裹的代码段，不管其延时多久，都会被js放到代码的尾部，只有等其他代码执行完毕后才会按延时时间去运行其内部的代码；
• 根据这个特性，我们可以把需要最后执行的代码用setTimeout 0进行包裹，确保最后执行；在部分事件上，例如我需要一个div显示用户输入文本框的内容，这个时候我使用onkeydown来绑定更新输入值，当键盘被按下时开始更新输入值；但是第一次按下键盘输入时，此时js的处理结果还没出来，但由于我绑定按下这个条件就会更新输入值，所以等于第一次输入去获取更新时是空的，这样在用户看来就是我按下第二个键才显示之前输入的内容；那么我们可以怎么做呢？对，在获取更新的这个代码上加setTimeout 0 ，让其跑到js处理结果之后去更新，这样就能实时显示输入值了！

小练习

下面的代码输出多少？修改代码让fnArri 输出 i

var fnArr = [];
for (var i = 0; i < 10; i ++) {
    fnArr[i] =  function(){
        return i;
    };
}
console.log( fnArr[3]() );  //  输出为10

方法1 使用闭包：

var fnArr = [];
for (var i = 0; i < 10; i ++) {
    fnArr[i] =  function(i){
        return function(){
          return i;
        };
    }(i);
}
console.log( fnArr[2]() );  //  2

方法2 把i绑定到函数上 作为函数的一个属性存储起来

var fnArr = [];
for (var i = 0; i < 10; i ++) {
  var print=function(){};
  print.index=i;
  fnArr[i]=print;

}
console.log( fnArr[5].index );  //  5

方法3 用两个立即执行函数返回i 赋给fnArr[i]；相当于fnArr[i]=i，数组里面放的是固定的数（好像没什么。。。但是fnArr[i]可以输出i）

var fnArr = [];
for (var i = 0; i < 10; i ++) {
    fnArr[i] =  function(){
        return function(){
          return i;
        }();
    }();
}
console.log( fnArr[7] );  //  7

使用闭包封装一个car对象

var Car = function(){
  var speed=0;
  return{
    setSpeed:function (num){
      speed=num;
    },
    getSpeed:function (){
      console.log(speed);
    },
    accelerate:function (){
      speed=speed+10;
    },
    decelerate:function (){
      speed=speed-10;
    },
    getStatus:function (){
      if(speed>0)
        console.log('running')
      else console.log('stop')
    }
  }
}();
Car.setSpeed(30);
Car.getSpeed(); //30
Car.accelerate();
Car.getSpeed(); //40;
Car.decelerate();
Car.decelerate();
Car.getSpeed(); //20
Car.getStatus(); // 'running';
Car.decelerate(); 
Car.decelerate();
Car.getStatus();  //'stop';
//Car.speed;  //error

使用setTimeout模拟setInterval的功能

function newInterval(func,time){  //定义伪间隔函数  一个形参为‘函数’，另一个形参为‘间隔时间’
  setTimeout(function(){
    func();
    newInterval(func,time);
  },time);
}
var i=1;
function count(){      //举个例子 使用计数函数 
  console.log(i++);
}
newInterval(count,1000);

计算setTimeout最小时间粒度

function min(){
  var t1=Date.now();
  var i=0;
  var clock=setTimeout(function(){
    i++;
    if (i==5000){
      clearInterval(clock);
      console.log((Date.now()-t1)/i);
    }
    clock=setTimeout(arguments.callee,0)
  },0);
}
min();  //  4.102  4.0982  4.0968  最小粒度应该为4ms 

解释如下代码的输出

var flag = true;
setTimeout(function(){
    flag = false;
},0)
while(flag){}   //没有输出结果 因为setTimeout所包裹的代码将会被放到末尾执行 flag一直是true 导致循环一直在进行，后面的代码在排队等候中
console.log(flag); 

下面这段代码输出？如何输出delayer: 0, delayer:1...（使用闭包来实现）

for(var i=0;i<5;i++){
    setTimeout(function(){
         console.log('delayer:' + i );  // 
    }, 0);
    console.log(i);    // 先输出 0  1  2  3  4 ，再输出 delayer：5
}

让其输出delayer: 0, delayer:1的方法如下：

for(var i=0;i<5;i++){
  (function(i){
    setTimeout(function(){
      console.log('delayer:' + i );
    }, 0);
    console.log(i);   //先输出 0  1  2  3   4 再输出 delayer:0 delayer:1 delayer:2 delayer:3 delayer:4
  })(i);                    
}