如何防止循环中的功能

Question

我有一个像这样在 for 循环中声明的 jquery click 函数

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

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 2

尝试这样的不循环，

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

Answer 3

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，则上下文“移动”就像您声明循环一样，所以这种快速缓存技巧几乎总是有效的（尽管如果声明更进一步的范围确实有意义，那就去做吧）。

/*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

Answer 4

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

它还会诱使您犯错误，例如在函数中使用 i（由于 Javascript 没有块作用域，这不会按您期望的方式工作）。

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