在 Javascript 中关闭

IT技术 javascript 循环 油猴 关闭
2021-03-19 06:39:36

可能的重复:将
值传递给 onclick

我有 100 个元素的 ids divNum0,..., divNum99每次单击时都应doTask使用正确的参数调用

不幸的是,下面的代码没有关闭 i,因此doTask所有元素都用 100 调用。

function doTask(x) {alert(x);}

for (var i=0; i<100; ++i) {
    document.getElementById('divNum'+i).addEventListener('click',function() {doTask(i);},false);
}

有什么办法可以让函数用正确的参数调用吗?

2个回答

尽管(正确)答案是重复的,但我想指出一种更高级的方法——用迭代器替换循环,这有效地解决了 javascript“后期绑定”闭包问题。

loop = function(start, end, step, body) {
    for(var i = start; i != end; i += step)
       body(i)
}

loop(1, 100, 1, function(i) {
   // your binding stuff
})

通过自执行函数字面量(或命名工厂函数)创建闭包

function doTask(x) { alert(x); }

for(var i = 100; i--;) {
    document.getElementById('divNum' + i).onclick = (function(i) {
        return function() { doTask(i); };
    })(i);
}

或者使用DOM节点进行信息存储

function doTask() { alert(this.x); }

for(var i = 100; i--;) {
    var node = document.getElementById('divNum' + i);
    node.x = i;
    node.onclick = doTask;
}

后者对内存更友好,因为没有创建多余的函数对象。

注意:说立即调用函数表达式更准确:)
2021-05-19 06:39:36