Question

我有一个id循环生成的变量for。出于某种原因，id在callback传递时会从0更改为1。我的猜测是我错误地传递了id参数。

    refreshMenu: function(mods, callback){
    var menu = document.getElementById('menu'), 
            ul = document.createElement('ul');

    menu.innerHTML = ''; 
    menu.appendChild(ul);

    for(var id = 0; id < mods.length; id++){
        var li = document.createElement('li'), 
        that = this;


            ul.appendChild(li);

            li.setAttribute('id', id);
            li.innerHTML = mods[id].get('name');

            console.log(id); // HERE ---> 0

            li.addEventListener('click', function(){
                that.selectMenu(li, function(){

                    console.log(id); HERE ---> //1 ?

                that.selectList(id - 1);

                });
            }, false);
        }

        callback();
    }, 

    selectList: function(id)
        var activeList = this.activeList();

        console.log(id);

        if (activeList.id == id){
            return;
        } 
        else if (activeList){
            activeList.setAttribute('class', '');
        };

        var target = document.getElementById(id);
        target.setAttribute('class', 'activeList');
    },  

    selectMenu: function(li, callback){
        if(li.className == 'activeMenu') 
            return; 

        var active = document.getElementsByClassName('activeMenu')[0];
        if(active)      
            active.setAttribute('class', '');

        li.setAttribute('class', 'activeMenu');

        callback();
    },

Answer 1

在中为循环构建闭包时，这是一个非常常见的问题。您正在创建的所有函数都引用相同的 id 变量， for 循环变异变量。

解决此问题的一种简单方法：创建一个创建这些函数的辅助函数，并让帮助程序获取自己的参数。

// In the body of the for loop ...
var makeClickFunction = function (li, id) {
    return function (){
        that.selectMenu(li, function(){
                               console.log(id);
                               that.selectList(id - 1);
                            });
    };
};
li.addEventListener('click', makeClickFunction(li, id));

帮助器对 id 参数的绑定会影响 for 循环的绑定，这是一件好事！我们故意这样做。我们还会捕获 li ，因为它也需要保留。

稍后，我们调用 makeClickFunction ，传入 for 循环中的当前值。 for 将继续改变其 id ，但没关系：该突变与 makeClickFunction 的闭包上的行为无关。

Answer 2

在调用回调之前，id的值已经更改，因此如果在调用回调时需要正确的id值，则需要闭包。

        li.addEventListener('click', function(){
            that.selectMenu(li, function(){

                console.log(id); HERE ---> //1 ?

            that.selectList(id - 1);

            });
        }, false);

==＆GT;

li.addEventListener('click', 
(function(li,that,id){
    return function(){
        that.selectMenu(li, function(){
        console.log(id); 
        that.selectList(id - 1);
        })
    }
})(li,that,id),
false);

在for循环中错误地传递回调参数

2 个答案: