起初,问题出现在实现一个加载商品的页面。在页面显示的时候,展示的商品栏会一个接一个的下拉。当时觉得实现起来很简单,用for把商品个数循环一遍,分别加个定时器,延时用for的变量控制就好了。但是当我写完时发现,商品页加载时会像没有延时一样,所有的商品都完成了下拉。
有问题当然问度娘鸭。百度了一下发现,setTimeout要是在循环中会存在闭包问题。因为计时器是异步执行函数,即使延时是0,也会在循环完成后执行。本着面向初学者的原则,就不给大家唠嗑事件队列了。下面举个例子:
for(var i=0;i<=5;i++){
setTimeout(function(){
console.log(i);
},0);
}
如果你认为输出0,1,2,3,4,5那么就错了。事实上会输出6个6,即使延时为0。那么说明i传入后并不会保存在定时器内导致在setTimeout延时被激活时输出的是改变后的i了。i在循环最后一次判断时是6,那么每个setTimeout都会输出的就是6了。解决这个问题的办法就是闭包,使得i在属于当前代码块,也就是i所属的setTimeout中被访问,而不会被其它函数块访问到。
for(var i=0;i<=5;i++){
(function(i){
setTimeout(function(){console.log(i);},0);
})(i);
}
这样就可以正常输出0,1,2…。这是因为每次循环的时候会把参数传进匿名函数内部,这样setTimeout在访问到的是传进匿名函数的参数,而不会去访问最后的变量i了。事实上还可以用es6的let定义块级变量i,或者外部函数返回处理的函数也同样可以达到目的。总之,核心就是保证在任意一次循环的内部访问到的是自身的变量,是不会被外部改变的。
这个就是之前发现问题的代码,改了后纪念下:
mp.addEventListener("click",function(){
if(mp_child.style.display!="block"){
mp_child.style.display="block";
setTimeout(function(){
mp_child.style.opacity="1";
},400);
function lazy_load(m,i){
m[i].style.marginTop="30px";
m[i].style.opacity="1";
}
function callback(m,i){
return function(){
lazy_load(m,i)
}
}
for(var i=0;i<len_li;i++){
setTimeout(callback(MP_li,i),400+200*i);
}
}else{
mp_child.style.opacity="0";
setTimeout(function(){mp_child.style.display="none";},400);
function lazy_load(m,i){
m[i].style.marginTop="0px";
m[i].style.opacity="0";
}
function callback(m,i){
return function(){
lazy_load(m,i)
}
}
for(var i=0;i<len_li;i++){
setTimeout(callback(MP_li,i),200*i);
}
}
});