如何在 javascript 闭包调用中生成动态字符串

Question

我正在创建一长串选择项，并希望创建一个闭包调用来添加每个选项，然后将调用排队（通过 setTimer），这样浏览器就不会挂起。

我的实现效果很好，但让我感到困惑的是，以下代码：

var mainList = $('#mainList');
for (var i=0;i < 100000; i++) {
  var self = mainList, addOption = function() {
    $(self).append('<option value=' + i + '>' + i + '</option>');
   };

  $.queue.add(addOption, this);
}

生成：

<option value='100000'>100000</option>
<option value='100000'>100000</option>
<option value='100000'>100000</option>  etc...

我想让它在哪里生成选项：

<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>  etc...

我正在努力解决闭包的执行方式，当 i == 100000 时调用 addOption() 方法是有道理的，但我希望调用能够反映 i 在排队时的值.

我在这里缺少一个简单的技巧吗？

Answer 1

通过返回函数的IIFE 设置addOption

var mainList = $('#mainList');
for (var i = 0; i < 100000; i++) {
    var self = mainList,
        addOption = (function(i) {
            return function() {
                $(self).append('<option value=' + i + '>' + i + '</option>');
            }
        })(i);
    $.queue.add(addOption, this);
}

Answer 2

在引入Function.prototype.bind 之前，在这种情况下肯定有必要专门使用闭包来捕获一个或多个变量。

现在，这种方法被认为有点笨拙。

您可以定义一个基本的addOption 函数，然后在循环中生成它的版本，使用addOption.bind() 将mainList 绑定为“thisArg”，并将i 作为第一个正式变量：

var mainList = $('#mainList');
var addOption = function(i) {
    this.append('<option value=' + i + '>' + i + '</option>');
};
for (var i=0; i<100000; i++) {
    $.queue.add(addOption.bind(mainList, i), this);
}