for 循环中使用函数导致的闭包问题解决——两种方式解决

r囧r小猫 2022-10-11 01:11 110阅读 0赞

for循环中，如果给每个元素都使用函数进行处理的话，很可能出现闭包问题

## 简单的for循环代码 ##

var arr = [0,1,2,3,4,5];
    function fn(){ 
    	for(var i = 0;i<arr.length-1;i++){ 
    		console.log("索引",i);
    	}
    }

控制台打印情况如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]

## for循环中加入setTimeout函数 ##

var arr = [0,1,2,3,4,5];
    function fn2(){ 
    	for(var i = 0;i<arr.length;i++){ 
    		setTimeout(()=>{ 
    			console.log("索引",i);
    		},100)
    	}
    }

控制台打印效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
发现所有的索引打印出来都是6.  
这是因为`setTimeout`是一个异步函数，在`for`循环执行完循环后，此时的`i`是5的情况下，`arr.length`是6.则再次进行`++`，然后，异步的`setTimeout`延时函数可以执行了，此时的`i`就是6了，所以会打印6次`索引6`。

如果仅仅是为了保证索引能够依次执行到函数中的话，则可以有两种方式处理：

### 1.for循环中用let代替var——解决 ###

代码如下：

var arr = [0,1,2,3,4,5];
    function fn3(){ 
    	for(let i = 0;i<arr.length;i++){ 
    		setTimeout(()=>{ 
    			console.log("索引",i);
    		},100)
    	}
    }

控制台效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]

### 2.for循环中使用立即执行函数包裹——解决 ###

代码如下：

var arr = [0,1,2,3,4,5];
    function fn4(){ 
    	for(let i = 0;i<arr.length;i++){ 
    		((i)=>{ 
    			setTimeout(()=>{ 
    			console.log("索引",i);
    		},100)
    		})(i)
    	}
    }

控制台打印如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]

## for循环中加入click点击事件 ##

如果跟上面一样，都只是为了一个索引的话，或者索引对应的其他参数的话，其实可以直接通过将`var`改为`let`来解决。

但是如果还有其他的操作，这种方式就不行了。只能是通过立即执行函数的方式来解决了

例如之前的一篇文章中提到的图片放大镜的代码：

[js显示图片放大镜效果：https://blog.csdn.net/yehaocheng520/article/details/115278622?spm=1001.2014.3001.5501][js_https_blog.csdn.net_yehaocheng520_article_details_115278622_spm_1001.2014.3001.5501]

里面的给每个dom元素绑定点击事件就是通过立即执行函数来解决的。如果单纯的只是将`var`改为`let`，则是不可以的。。。。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20221005/f65b894f309d4fd4a0c4f157dfdde741.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20221005/d192a6c6839241eba817d50fd3316fb4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20221005/5f5c541aec644384a2e5ad8bfcfdcb43.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20221005/64daf58b2b494e18a28223864b69986c.png
[js_https_blog.csdn.net_yehaocheng520_article_details_115278622_spm_1001.2014.3001.5501]: https://blog.csdn.net/yehaocheng520/article/details/115278622?spm=1001.2014.3001.5501
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]: /images/20221005/a6fc58ede67442cbab81c7cc3a356dcd.png