setTimeout在循环中无法正确延时的问题

起初，问题出现在实现一个加载商品的页面。在页面显示的时候，展示的商品栏会一个接一个的下拉。当时觉得实现起来很简单，用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);
		    }
		}
	});