闭包在事件中有选择性执行回调函数时的运用

    最近项目需求需要在页面中实现一个点击标题栏展开效果，用户了解完内容后，可以重新点击标题栏，内容所在的div便收起。大概样式如下图：

    实现思路大概是这样的，首先获取需要添加事件的标题栏，运用for循环为每个标题栏添加点击事件。在采用for为标题栏添加事件时，要注意js中的一个经典问题：

    如图，再给aH3数组添加事件时，在回调函数中注意i值在点击时的变化，如果直接将i运用在回调函数中，每次点击页面i都为循环完成后的最大值，不能实现所需的点击第几个aH3，i 相应的显示值。处理方法大家可能都已非常清楚，一种是给aH3数组的每个元素添加相应的私有属性，如上图 ._index  属性，另一种是利用闭包，也就是在上图代码的闭包flag参数后面添加一个i参数和函数调用时也添加一个i值就可以，同样也可以解决。

    啰嗦了半天，终于到了本篇博文的重点了，想要实现这种点击展开，再点击收回，肯定需要一个单独标示符，来控制事件的执行，就是上图中的flag。一开始，直接将flag运用在程序中，效果是能实现，在点击的过程中偶尔会出现超出预期的东西，那就是让我很心动的bug，找各种原因，忽然眼前一亮，这可能也是以上js经典问题所导致的。

    分析如下：所有的aH3 数组都同时运用一个flag，点击两个标题栏，flag 为 “1”，再返回去点击其中一个标题栏，第一次点击会没有反应，再点击一次才会收缩，因为此时flag为1，所以会没有反应，当点击完后flag变为“0”，此时相应的div才会收缩回去。（语言表达的不清，逻辑有点混乱，呵呵 ，见谅）

    针对以上病症，我就该下药了，关键是让aH3中的每个标题栏拥有不同的flag，所以运用闭包，让for循环时为每个aH3数组中的元素都拥有一个flag来保存自己的状态，这样就会把心动的bug给去除了！

转载于:https://my.oschina.net/u/564368/blog/94322