关于定时器-闭包分析

时间:2022-09-13 23:34:18

第一次写博文:一直不怎么理解闭包怎么回事?在网上看了许多的解释,但是都是不怎么明白!今天静心来,研究了一下。如有不对还请大神大家多多指教!

function checkClosure(){
var str = ‘测试’;
setTimeout(
function(){ alert(str); } //这是一个匿名函数
, 2000);
}
checkClosure();

首先,查看这个函数执行的结果!
checkClosure()在执行的时候是瞬间的,时间很多几乎可以忽略。
但是该函数执行过后,其内部的函数,在定时器2000毫秒后执行,打印出来字符串 str即“测试”;

我们思考一下,checkClosure函数执行完毕后,内部函数在他执行后才执行,说明其内部的函数(被渲染后,被保存在内存中)等待执行!(这也就是闭包的原理吧)


那么我们看下循环定时器:(循环定时打印出来i)

for(var i = 0; i < 5; i++) { 
var hu = function(v){
return function(){
console.log(v)
}
}(i);

setTimeout(hu, 400 * i);
};

分析:
第一步:

for(var i = 0; i < 5; i++) {  //for循环瞬间完毕,其内部hu函数在400*i执行,这个时候i已经是5
var hu = function(v){
console.log(i) //i打印出来是5
};
setTimeout(hu, 400 * i); //这里的400*i,i 是和循环的 i 是同步
};

第二步:开始我们说过,函数执行后其内部函数,会保留在内存中,并记录当时的执行环境!
所以,我们思考,要是在循环的时候,把i传进函数内部,让其记录在内存中,并保留当时执行的环境,不就可以在循环后,执行了

var hu = function(v){  //该函数是立即执行函数,可以记录当时环境下的i,但是定时器无效了,所以我们让该该函数返回一个函数,在让让定时器去调用
console.log(v)
}(i) //变量i传进了函数

第三步:让函数hu,返回一个函数,让定时器调用

var hu = function(v){  //该匿名函数执行后返回一个函数
//v 在干匿名函数内是全局的,其内部都可以所见
return function(){
console.log(v)
}
}(i)//变量i传进了函数

第四步:

for(var i = 0; i < 5; i++) { 
var hu = function(v){
return function(){
console.log(v)
}
}(i);

setTimeout(hu, 400 * i); //函数hu返回一个函数,然后在指定时间,被浏览器调用执行
};

**题外话:**setTimeout执行的原理和过程

setTimeout(hu, 400 0); 
setTimeout(hu(),2000); //函数hu预解析阶段,发现该函数是执行的,则运行这里的时被执行(定时器无效),要是没有自执行,浏览器就执行这个函数

这里不知道对不对 以为我查了下,没有对定时器的执行内部过程或者原理进行,详解的!