js中闭包引起的事件重复触发的问题

问题描述

最近使用JQ做了一个项目，其中，引用了一些比较老的JQ库，再对其进行增加一些功能的时候，遇到了一个问题，就是当点击“换一组”功能时候，更换回的内容不是当前的结构中的内容。我做了一个简单的例子：

http://code.wubin.work/code/jq/jq-unbind.html

其中，当先点击“换一组”，清空了所有元素，这时候，我发现当随着我点击换一组N次，那么当我点击“红色按钮”时候，执行的次数也是N次，并且由于我使用了闭包，导致执行的次数也为N次。

以下为主要部分的代码：

 <ul id="list"></ul>
<button id="change-group">换一组操作</button>
<div class="btn" id="close">查看执行的次数</div>

(function () {
   // 首先动态的插入元素
    data = shuffle(data);
    insertImgs();
   // 再启动函数
   photo();

   // 当点击换一组的时候 清空元素 再插入图片再执行
    $('#change-group').bind('click', function() {

       data = shuffle(data);
       $list.empty();
       insertImgs();

       photo();
   }); 
})()

function photo() {
    var $list = $('#list');
    var $thumbs = $list.children('li');
    
    function start() {
        disperse();
    }
    
    function disperse() {
       console.log('---------------------------');
       $thumbs.each(function(i){
          var $thumb  = $(this);
          console.log($thumb[0])

          $('#list2').append($thumb);
       });
       console.log('---------------------------');
    }

    $('#close').bind('click', function() {
        disperse();
    });

}

这时候我们可以发现，当点击close的时候，获取的thumbs不是当前的元素。

解决办法

解决也很简单，在每次换一组的时候，执行一次解绑即可。

 $('#change-group').bind('click', function() {

    /* 解决办法就是每次更换一组的时候 取消闭包内#close的事件绑定，不让闭包内的事件重复执行 */
    $('#close').unbind(); 

    data = shuffle(data);
    $list.empty();
    insertImgs();
    photo();
});

所以，当我们遇到因为闭包引起的事件重复触发，我们就可以考虑在合适的逻辑节点进行解绑事件。JQ中的解绑有unbind和off。