关于闭包、定时器

2016-10-28  本文已影响0人  JunVincetHuo

1.什么是闭包? 有什么作用

可以看demo来理解:

//没有使用闭包
for(var i =0; i<5; i++){
  setTimeout(function(){
    console.log('a'+i)
  },0)
    }

这个函数输出的结果并不是想象的a0,a1,a2,a3,a4,而是5个a4,这是因为它执行函数时,i在函数里面并没有声明,因此他向外寻找,而i到4的时候停止循环,因此寻找到i=4,所以,这就是得出5个a4的原因。
那么,我们可以使用闭包避免这个问题,如下

for(var i=0;i<5;i++){
  (function (num){
    setTimeout(function(){
      console.log('a'+num)
    },0)
  })(i);
}

原因是:它构建一个只有自己本身才可访问的闭包,保存只供本身使用的变量(在我理解就是,在闭包里面处理各种变量。)

参考:
阮一峰学习Javascript闭包(Closure)

2.setTimeout () 有什么作用

  1. 起到一个倒计时运行的作用,时间设置为多少,他就延迟多少时间运行,倘若是0就立即执行
  2. 将setTimeout()里面的代码放置代码的最后运行
 var a=1;
 setTimeout(function(){
     console.log('before',a);
     a = 2;
     console.log('after',a);
},0);

     a=100;
     console.log(a);
    
//得出的结果先是 100
               before 100     
               after 2

代码

1.下面的代码输出多少?修改代码让fnArri输出 i。使用两种以上的方法

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

思路:可以用闭包让fnArri输出i

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

2.使用闭包封装一个汽车对象,可以通过如下方式获取汽车状态

var car =(function(){
    var i =0;

    function setSpeed(k){
          i =k;
    }

    function getSpeed(){
      return i;
  }
    function accelerate(){
      i=i+10;
}
  function decelerate(){
    i=i-10;
}
function getStatus(){
    if(i>0){
        return 'running';
      }
    else
       {
        return 'stop';
      }
}
return {
    getSpeed:getSpeed,
    setSpeed:setSpeed,
    accelerate:accelerate,
    decelerate: decelerate,
    getStatus: getStatus
}
})();
Car.setSpeed(30);
console.log(Car.getSpeed());//30
Car.accelerate();
console.log(Car.getSpeed());//40;
Car.decelerate();
Car.decelerate();
console.log(Car.getSpeed()); //20
console.log(Car.getStatus()); // 'running';
Car.decelerate();
Car.decelerate();
console.log(Car.getStatus());  //'stop';
  1. 写一个函数使用setTimeout模拟setInterval的功能
var i =0;
function setInterval(){
  setTimeout(function(){
  console.log(i++)
  setInterval())
},1000)

  setInterval();

4.写一个函数,计算setTimeout平均[备注:新加]最小时间粒度

function getMini(){
  var i =0;
  var start = Date.now();
  var clock = setTimeout(function(){
     i++;
     if(i === 1000){
      clearTimeout(clock);
      var end = Date.now();
      console.log((start-end) / i) )
  }
  clock = setTimeout(arguments.callee,0)
},0)

5.下面这段代码输出结果是? 为什么?

var a = 1;
setTimeout(function(){
 a = 2;
console.log(a); //2
}, 0);
var a ;console.log(a); //1
a = 3;console.log(a); //3
//但是console.log的顺序是 1,3,2
//这是因为setTimeout会让代码放到代码最后执行

6.下面这段代码输出结果是? 为什么?

var flag = true;
setTimeout(function(){ 
flag = false;
},0)
while(flag){}
console.log(flag);
//这里并没有输出结果,因为while(flag)会一直判断是true,这就会一直执行循环,因此下面的代码并不会执行 

7.下面这段代码输出?如何输出delayer: 0, delayer:1...(使用闭包来实现)

for(var i=0;i<5;i++){ 
setTimeout(function(){ 
console.log('delayer:' + i );//delayer5
 }, 0); 
console.log(i);} //5
for(var i=0;i<5;i++){
(function(num){
      setTimeout(function(){
      console.log('delayer:'+num);
    },0)
})(i);
console.log(i);
}
上一篇 下一篇

猜你喜欢

热点阅读