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

Question

我有一个在 for 循环中生成的变量 id。由于某种原因，在 callback 中传递时，id 会从 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

在 for 循环中构建闭包时，这是一个非常常见的问题。您创建的所有函数都引用同一个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 参数的绑定(bind)会影响 for 循环的绑定(bind)，这是一件好事!我们是故意这样做的。我们还捕获li，因为它也需要被保留。

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