Question

我有一个jquery点击函数声明for for循环像这样

for (i = 1; i !== 4; i += 1) {
    id = "index" + i + "id";
       if ($(id).length) {
          $(id).click(function() {
             var isChecked = this.checked;
             onclickHelper(isChecked, this.id);
          });
       }
}

如何摆脱在循环中创建函数的警告？第二个为什么不好（jslint给我这个警告）

Answer 1

每次执行表达式function() { ... }时（我的意思并不是调用函数），Javascript会为函数创建一个单独的闭包。
这不必要地浪费了记忆。

它还会诱使你犯错误，比如在函数中使用i（由于Javascript没有块范围，因此无法按预期方式工作）。

相反，你应该将函数放在循环之外 - 只创建一次，并将其存储在变量中 - 然后将相同的函数实例添加到每个元素。

Answer 2

在没有循环的情况下尝试这样的事情，

$("[id=^'index']").click(function() {
     var isChecked = this.checked;
     onclickHelper(isChecked, this.id);
});

Answer 3

var $ids = $();
for (var i = 1; i < 4; i++)
    if($("#index" + i + "id").length)
        $ids = $ids.add("#index" + i + "id");

$ids.click(function () {
    var isChecked = this.checked;
    onclickHelper(isChecked, this.id);
});

Answer 4

SLaks是对的，一个最小的重构（没有具体说明这里发生的事情）遵循这个建议将是这样的：

/*global $, onclickHelper */
var i, id, fnCached;

// cache your function instead of creating each time in your loop
fnCached = function() {
    var isChecked = this.checked;
    onclickHelper(isChecked, this.id);
};

for (i = 1; i !== 4; i += 1) {
    id = "index" + i + "id";
    if ($(id).length) {
        $(id).click(fnCached());  // then simply call it
    }
}

正如他所说，JSLint只是希望你更高效地运行，因为你可以在变量中缓存函数，在循环之外但是在相同的范围和 poof 中声明，你就完成了。

巧妙的是，“因为”提升，如果你在函数中使用了i并在循环之前声明了fnCached，那么上下文“就像你在声明中一样” -loop，所以这个快速缓存技巧几乎总是有效的（尽管如果说进一步扩大范围确实有意义的话，那就去做吧）。

/*jslint browser: true */
this.spam = "spam";

var i, fnCached;

fnCached = function () {
    // i's scope pervades the snippet here
    window.alert(this.spam + " " + i);
};

for (i = 0; i < 3; i += 1) {
    fnCached();
}

警告“垃圾邮件0”，“垃圾邮件1”和“垃圾邮件2”。

Fiddle

如何防止循环中的功能

4 个答案: