闭包

定义
「一个函数」+「访问到的外部变量」= 闭包
作用
创建内部变量，既不能被外部随意修改，又可以通过指定的函数接口来操作。
原理
利用变量仅在函数作用域内部可用的特点，用子函数来操作 / 暴露父作用域内的变量，用父函数来保护变量不被外界直接修改。

举例
function princess() { //从前有一位公主

       var adventures = [];     //她生活在一个充满奇幻冒险的世界里

       function princeCharming() { /* ... */ } //她遇到了她的白马王子
       var unicorn = { /* ... */ },  //带着他骑着独角兽开始周游这个世界
           dragons = [ /* ... */ ], //与巨龙战斗
           squirrel = "Hello!";    //巧遇会说话的松鼠 

       adventures.push(unicorn, dragons, squirrel, ....); //还有其他一些新奇的事物

   return {    //但是她不得不回到她的王国里，面对那些年老的大臣。

     story: function() { //她会经常给那些大臣们分享她作为公主最近在外面充满奇幻的冒险经历
                return adventures[adventures.length - 1]; 
        } 
   };          
}

var littleGirl = princess(); //但是在大臣们的眼里，总是认为她只是个小女孩......

littleGirl.story();  //讲的是一些不切实际，充满想象的故事

即便所有大臣们知道他们眼前的小女孩是真的公主，但是他们却不会相信有巨龙或独角兽，
因为他们自己从来没有见到过。大臣们只会觉得它们只存在于小女孩的想象之中。
但是我们却知道小女孩述说的是事实......

定时器

setTimeout()

作用
设置一个定时器,在定时器到期后执行一次函数
语法
var timerId = setTimeout(执行函数 , 延迟毫秒) // 返回一个整数作为该延时操作的ID
清除
clearTimeout( ID )
**setTimeout 0 **
解析：setTimeout(f, 0) 即将定时器延迟毫秒设置为0
作用：间接实现异步操作
原理：JS的运行机制是逐行执行代码，即单线执行。
setTimeout的运行机制是将指定函数移出本轮执行等到下一轮再检查是否到指定时间，如果没到继续等待下轮执行。
setTimeout0 表示尽早执行而非立刻执行 即把指定函数放到最后再执行

setInterval()

作用
重复调用一个函数，在每次调用之间以固定的时间延迟
语法
var intervalId = setInterval(执行函数 , 延迟毫秒) // 返回一个整数作为该延时操作的ID
清除
clearInterval( ID )
缺点
1某些间隔会被跳过
2多个定时器的代码执行时间可能会比预期小

应用

**Q：fnArr[ i ] = 10 **
var fnArr = [];
for (var i = 0; i < 10; i ++) {
fnArr[i] = function(){
return i; ---------------------->i=10 时满足跳出条件
};
}
console.log( fnArri ); // 所以总是输出10
A： fnArr[ i ] = i
方法一：隐藏变量 i
var fnArr = [];
for (var i = 0; i < 10; i ++) {
fnArr = (function(){ ---------------------->保存i每次的变量值，防止继续循环
var n = i;
return function(){ ----------------------> 暴露i此次的值
retur n;
}
} )(i)
}
console.log( fnArr3 ); // 3
方法二：隐藏整个函数
var fnArr = [];
for(var i = 0; i < 10; i++){
(function(n){ ----------------------> 保存整个函数
var n = i;
fnArr[i] = function(){ ------------> 每次拿到i的变量值都执行一次函数
return n;
}
})(i)
}
console.log( fnArr3 );

Q：使用闭包封装一个汽车对象，可以通过如下方式获取汽车状态
var Car = //todo;
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
**A： **
var car=(function(){
var speed=0;
function setSpeed(n){ return speed=n; }
function getSpeed(){ return speed; }
function accelerate(){ speed +=10; }
function decelerate(){ speed -=10; }
function getStatus(){
if(speed>0){
return "running";
} else{
return "stop";
}
}
return {
setSpeed: setSpeed,
getSpeed: getSpeed,
accelerate: accelerate,
decelerate: decelerate,
getStatus: getStatus
}
})();
Q： 用setTimeout 模拟出setInterval .VS setTimeout
区别：
setTimeout重复运行时，延时= 定时 + 函数执行时间
setInterval运行时，延时= 定时，即已经包括函数执行时间
应用：
setTimeout避免连续调用繁复函数产生互相干扰的问题
setInterval要求时间间隔非常精确
实现：
var i = 0;
function intv(){
setTimeout(function(){
console.log(i++);
intv();
},1000);
}
intv();

Q：计算setTimeout平均最小时间粒度
**A： **setTimeout(f, 0)即使将第二个参数设为0，实际上也达不到0毫秒。根据html5标准，setTimeout推迟执行的时间最少是4毫秒。如果小于这个值，会被自动增加到4。这是为了防止多个 setTimeout(f, 0)语句连续执行造成性能问题。

function getMini(){
     var i = 0; 
     var statr = Date.now(); --------------->先获取当前时间点
     var clock = setTimeout(function(){ ---->setTimeout（f,0）尽快执行函数
           i++; 
           if(i === 1000){  ---------------->循环1000次，积累"尽快值"
                  clearTimeout(clock); 
                  var end = Date.now(); ------------>循环1000次后的时间点
                  console.log( (end-statr) / i);------->循坏i次所用时间除以i
           } 
           clock = setTimeout(arguments.callee,0); 
      },0)
}
getMini()；

Q：解析代码
**A： **setTineout(f,0)调整了执行顺序
var a = 1;
setTimeout(function(){
a = 2;
console.log(a);--------------->第三次输出a，a=2
}, 0);
var a ;
console.log(a);--------------->第一次输出a，a=1
a = 3;
console.log(a);--------------->第二次输出a，a=3
//输出 1,3,2

Q：解析代码
**A： **死循环阻塞代码执行，无输出
var flag = true; // 定义flag，并赋值为ture
setTimeout(function(){ // setTimeout（f，0）将函数放至末尾执行
flag = false;
},0)
while(flag){} // 在这里无限循环，后面的代码都无法执行
console.log(flag); // 所以执行不到这里，什么也不会输出

Q：解析代码
for(var i=0;i<5;i++){
setTimeout(function(){ // setTimeout（f，0）将函数放至末尾执行
console.log('delayer:' + i ); // 再执行到这里，i=5，所以循环输出5个delayer：5
}, 0);
console.log(i); // 所以先执行循环，依次输出01234
}
0
1
2
3
4
"delayer:5"
"delayer:5"
"delayer:5"
"delayer:5"
"delayer:5"
A：改写为依次输出delayer: 0, delayer:1...
方法一：
for(var i=0;i<5;i++){
(function(n){ --------------->保存整个函数的输出值
setTimeout(function(){ --------------->函数放最后执行
console.log('delayer:' + n ); ---------------> 最后遍历 delayer:i
}, 0);
})(i)
console.log(i); --------------->所以先遍历i的值
}
0
1
2
3
4
"delayer:0"
"delayer:1"
"delayer:2"
"delayer:3"
"delayer:4"
方法二：
for(var i=0;i<5;i++){
setTimeout((function(n){ --------------->保存单次 delayer:i ，并且延后执行
console.log('delayer:' + n );
})(i), 0);
console.log(i); --------------->所以先输出i，再输出 delayer:i ，然后再次执行
}
"delayer:0"
0
"delayer:1"
1
"delayer:2"
2
"delayer:3"
3
"delayer:4"
4

{闭包丨定时器}

{闭包丨定时器}

闭包

定时器

setTimeout()

setInterval()

应用

推荐阅读更多精彩内容

{闭包 丨 定时器}

闭包

定时器

setTimeout()

setInterval()

应用

推荐阅读更多精彩内容

{闭包丨定时器}